0

サイトhttp://www.outsharked.com/imagemapster/default.aspx?what.htmlがどのように機能しているのか教えてください。ページをロード/リロードせずに URL を変更します。これはhtml5では行われていないと思います。html5をサポートしていないIE6で動作するためです。

4

1 に答える 1

1

そのサイトを作成しました。コメント投稿者は正しいです。Javascriptを使用してURLを変更します。IE6の場合とは異なり、ナビゲーションの動作については何もありません。ブラウザは、この種のことを行うために必要なクライアント側の機能をサポートしています。基本的な機能は次のとおりです。

  1. ナビゲーションでクリックイベントをキャプチャし、AJAXを介して内部コンテンツをロードする
  2. 有効な直接URLをターゲットに反映するようにURLを更新します。

リンクは有効なアンカーリンクでもあり、Javascriptがない場合は、同じページに移動します（ただし、すべてをロードします）。これは基本的なAJAXWebサイトのセットアップですが、わずかな違いが1つあります。AJAX/単一ページのWebサイトでは次のようなURLを使用するのが一般的な方法です。

http://mysite.com/home#somepage

または単に

http://mysite.com/#somepage

ハッシュタグ部分は、ユーザーが移動した実際のページを表します。誰かがそのURLに直接アクセスした場合、たとえばサイトの外部から、ページが読み込まれた後、サイトはJavascriptを使用してハッシュタグに基づいて正しいコンテンツを読み込みます。これは、AJAXを介して内部コンテンツを取得するために、最初のページがブラウザからロードされた後に別のリクエストを実行する必要があるため、内部コンテンツが正しいページを反映するのに少し遅延がある可能性があることを意味します。

私は、Javascriptの有無にかかわらず完全に機能するセットアップを作成することにより、それを回避しようとしていました。http://www.outsharked.com/imagemapster/default.aspx?faq.htmlなどのサイト内のURLに直接アクセスすると、コンテンツが直接読み込まれることがわかります。このURLは、Javascriptが無効になっている場合でも機能します。ハッシュタグの内容はサーバーに送信されないため、ハッシュタグを使用してこれを実際に行うことはできません。URLのハッシュタグの後に何があるかを知っているのはクライアントだけです。そのため、内部ページを表すためにクエリ文字列を使用していました。

このサイトアーキテクチャは、当時は一種の実験でした。それはかなりうまく機能しますが、コードは素晴らしくなく、私はそれで他に何もしませんでした、そして他のより良い肉付け/テスト済み/フル機能のフレームワークがそこにあると確信していますもの。

しかし、これは非常に簡潔であり、HTML5履歴ナビゲーションも実行するため（たとえば、最新のブラウザーで戻るボタンが機能するため）、学習ツールとして基本的なAJAXナビゲーションセットアップを作成するための要点の悪い例ではないかもしれません。

于 2012-09-11T14:05:04.937 に答える