-
昨年9月、Twitterはバージョンを刷新した。大きな変更点は、URL に「#!」記号が追加されたことです。例えば、改訂前のユーザーホームページのURLは、
改訂後はこうなりました
主要な Web サイトで重要な URL に「#」が大規模に使用されるのはこれが初めてです。これは、ハッシュ記号の役割が再認識されつつあることを示しています。この記事は、HttpWatch の記事を基に、シャープ記号に関する重要な知識を整理したものです。
1.#の意味
# Web ページ内の位置を表します。右側の文字は位置の識別子です。例えば、
http://www.example.com/index.html#PRint
Webページindex.htmlの印刷位置を表します。ブラウザがこの URL を読み取ると、印刷位置が表示される領域まで自動的にスクロールされます。 Web ページの場所の識別子を指定するには 2 つの方法があります。 1 つは <a name="print"></a> などのアンカー ポイントを使用する方法で、もう 1 つは <div id="print"> などの id 属性を使用する方法です。
2. HTTP リクエストには # は含まれません
# はブラウザのアクションをガイドするために使用され、サーバー側ではまったく役に立ちません。したがって、HTTP リクエストには # は含まれません。
たとえば、次の URL にアクセスします。
http://www.example.com/index.html#print
ブラウザによって行われる実際のリクエストは次のとおりです。
GET /index.html HTTP/1.1
ホスト: www.example.com
ご覧のとおり、index.html のみがリクエストされており、「#print」部分はまったくありません。
3. # 以降の文字
最初の # の後に現れる文字は、ブラウザによって位置識別子として解釈されます。これは、これらの文字がサーバーに送信されないことを意味します。
たとえば、次の URL は色の値を指定することを目的としています。
http://www.example.com/?color=#fff
ただし、ブラウザによって行われる実際のリクエストは次のとおりです。
GET /?color= HTTP/1.1
ホスト: www.example.com
ご覧のとおり、「#fff」が省略されています。 # が %23 にトランスコードされる場合のみ、ブラウザは # をリテラル文字として扱います。つまり、上記の URL は次のように記述する必要があります。
http://example.com/?color=%23fff
4. #Web ページのリロードをトリガーしないように変更します
# 以降の部分を変更するだけで、ブラウザは対応する位置までスクロールするだけで、Web ページはリロードされません。
たとえば、から
http://www.example.com/index.html#location1
に変更します
http://www.example.com/index.html#location2
ブラウザはサーバーにindex.htmlを再リクエストしません。
5. #を変更するとブラウザのアクセス履歴が変更されます
#以降を変更するたびにブラウザのアクセス履歴に記録が追加されます。「戻る」ボタンで前の位置に戻ります。これは、Ajax アプリケーションで特に役立ちます。さまざまな # 値を使用してさまざまなアクセス状態を表すことができ、ユーザーに特定の状態にアクセスするためのリンクを与えることができます。上記のルールは IE 6 および IE 7 には当てはまらず、# の変更によって履歴が増加することはないことに注意してください。
6. window.location.hash は # 値を読み取ります
window.location.hash プロパティは読み取りおよび書き込み可能です。読み取り時はWebページのステータスが変化したかどうかを判断するために使用でき、書き込み時はWebページをリロードせずにアクセス履歴レコードが作成されます。
7.onhashchangeイベント
これは HTML 5 の新しいイベントです。このイベントは、# 値が変更されるとトリガーされます。 IE8 以降、Firefox 3.6 以降、Chrome 5 以降、Safari 4.0 以降がこのイベントをサポートしています。
使用方法は 3 つあります。
window.onhashchange = 機能;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
onhashchange をサポートしていないブラウザの場合は、setInterval を使用して location.hash の変更を監視できます。
8. Googleクローリングの仕組み #
デフォルトでは、Google の Web スパイダーは URL の # 部分を無視します。
ただし、Google は、Ajax によって生成されたコンテンツをブラウジング エンジンで読み取れるようにする場合、URL に「#!」を使用すると、それに続くコンテンツをクエリ文字列 _escaped_fragment_ の値に自動的に変換することも規定しています。 。
たとえば、Google は、新しい Twitter バージョンの URL が次のとおりであることを発見しました。
別の URL が自動的にクロールされます。
http://twitter.com/?_escaped_fragment_=/ユーザー名
このメカニズムを通じて、Google は動的な Ajax コンテンツにインデックスを付けることができます。
記事の出典: Ruan Yifeng のオンライン日記