URLのハッシュを[ターン]

昨年9月のTwitterの改訂。

重要な変更は、URLが「#!」のシンボルに参加したということです。例えば、改正前のウェブサイトのユーザーのホーム・ページ

  http://twitter.com/username

改正後は、それはなり

  http://twitter.com/#!/username

私の印象では、これが初めてのユーザーとの直接的な相互作用のための「#」キーの大規模なURLのための主要なサイトです。これは、シャープ記号(ハッシュ)の役割が再理解されていることを示唆しています。よるHttpWatch記事、統合とシャープ記号に関連するすべての重要なポイント。

#まず、意味

#は、ページの位置を表します。その右の文字は、その場所の識別子です。たとえば、

  http://www.example.com/index.html#print

index.htmlページの印刷位置を代表して。ブラウザがこのURLを読み取った後、それが自動的に印字位置表示領域にスクロールします。

識別子は、ページの場所を指定し、2つの方法があります。まず、<のdivのid =「印刷」>のようにid属性を使用して、このような<a name="print"> </a>に、2などのアンカー、の使用。

#が含まれていない二、HTTPリクエスト

#は、サーバー側で完全に役に立たないブラウザの動作をガイドするために使用されます。そのため、HTTPリクエストには#が含まれていません。

たとえば、次のWebサイトを参照してください、

  http://www.example.com/index.html#print

:実際に送信され、ブラウザがこれです依頼

  GET  /index.htmlが  HTTP / 1.1

  ホスト:www.example.com

それだけで、要求のindex.htmlの「#print」の一部を見ることができます。

第三に、#文字の後に

最初#の後ろに任意の文字は、位置識別子ブラウザとして解釈される出現します。これは、これらの文字がサーバーに送信されないことを意味します。

たとえば、以下のURLの意図は、色の値を指定することです。

  http://www.example.com/?color=#fff

しかし、ブラウザによって送信された要求は、実際には次のとおりです。

  GET  /?色=  HTTP / 1.1

  ホスト:www.example.com

あなたは、「#1 FFF」は省略され、見ることができます。23%にトランスコードのみ#、ブラウザが文字の本当の意味として扱われます。言い換えれば、上記のURLは次のように記述する必要があります。

  http://example.com/?color=%23fff

第四に、変更は、ページのリロード#をトリガしません。

ただ、#の後の部分を変更すると、ブラウザがページをリロードしません、適切な場所にスクロールします。

例えば、から

  http://www.example.com/index.html#location1

変更

  http://www.example.com/index.html#location2

index.htmlをブラウザがサーバに要求を再しません。

五、チェンジ#は、ブラウザアクセス履歴を変更します

チェンジ#のすべての部分は、前の位置に戻ることができ、「戻る」ボタンを使用して、レコードにブラウザの履歴へのアクセスが増加します。

これは、Ajaxアプリケーションのために特に有用である、あなたは別の#値を使用することができます別のアクセス状況を表し、そしてあなたは、ユーザーに与えられた状態へのリンクにアクセスすることができます。

彼らは#は歴史を大きく変えないので、上記の規則IE 6とIE 7が保持していないことは注目に値します。

六、window.location.hash値は#を読みます

このプロパティwindow.location.hash読み書き可能です。読み込む場合、ページが状態を変更するかどうかを決定するために使用することができ、書き込み、アクセス履歴を作成するために、ページをリロードせずになります。

七、onhashchangeイベント

#値の変更は、このイベントをトリガしたとき、これは、新しいHTML 5のイベントです。IE8 +、Firefoxの3.6 +、クロム5 +は、Safariは、このイベントをサポートしてい4.0+。

これは、次の3つの方法で使用されます。

  window.onhashchange = FUNC。

  <本体onhashchange = "FUNC();">

  window.addEventListener( "なhashchange"、FUNC、偽);

Onhashchangeは、ブラウザがののsetInterval location.hashの変化を監視するために使用することができますサポートしていません。

八、Googleは#のメカニズムをクロール

デフォルトでは、Googleのウェブスパイダーは、URLの#セクションを無視します。

しかし、Googleはまた、指定されたあなたが読み込まれたAjaxエンジンによって生成されたコンテンツを閲覧したい場合は、URLを使用することができ、「#!」を、Googleが自動的にクエリ文字列_escaped_fragment_の値にその背中の内容を転送します。

たとえば、GoogleはTwitterのURLの新しいバージョンを見つけ、次のとおりです。

  http://twitter.com/#!/username

これは、自動的に別のURLをつかむだろう。

  http://twitter.com/?_escaped_fragment_=/username

このメカニズムを通じて、Googleの缶インデックス動的なAjaxのコンテンツ。

(終わり)

ます。https://www.cnblogs.com/sofire/p/3246386.htmlで再現

おすすめ

転載: blog.csdn.net/weixin_33671935/article/details/92637041