web-dev-qa-db-ja.com

Twitter、ハッシュバン#などのリンクを作成するURL

可能性のある複製:
Facebookのシバン/ハッシュバング(#!)とは何ですか?新しいTwitterのURLは何ですか?

Twitterがどのようにリンクを機能させるのかと思っていました。

ソースコードを見ると、リンクは/#!/ i/connectまたは/#!/ i/discoverのように使用されていますが、load( 'connect')のようなJavaScript関数が関連付けられていません。または何か、そしてそれはページのリロードを必要としないこと。ページのコンテンツを変更するだけです。

私は this ページを見ましたが、それらすべてのファイルが存在している必要があり、それらの1つに直接行くことはできませんでした。 Twitterではこれらのファイルは存在せず、他の方法で処理されていると思います。でも、私が間違っていたら訂正してください。

この効果を再現できる方法はありますか?もしそうなら、これを行う方法についてのチュートリアルはありますか?

26
ixchi

"Hash-Bang"ナビゲーション、時々呼ばれるように...

http://example.com/path/to/#!/some-ajax-state

...これは、最新のブラウザ標準のおかげですぐに問題にならない一時的な問題の一時的な解決策です。おそらく、Facebookがすでにやっているように、Twitterは段階的に廃止するでしょう。

それはいくつかの概念の組み合わせです...

これまで、リンクには2つの目的があります:ハッシュ(#)で示されるように、新しいドキュメントを読み込んだり、埋め込まれたアンカーまで下にスクロールしたりします。 。

http://example.com/script.php#fourth-paragraph

ハッシュの後のURLにあるものはサーバーから要求されたのではなく、ブラウザーによってページ内で検索されました。これはすべてうまくいきます。

AJAXの採用により、新しいコンテンツを現在の(すでにロードされている)ページにロードできます。この動的な読み込みでは、いくつかの問題が発生しました:1)この新しいコンテンツへのブックマークまたはリンクのための一意のURLがありませんでした。2)検索ではそれが表示されません。 。

一部の賢い人たちは、リンクとブックマークに含まれる一種の「状態」参照としてハッシュを使用することによって最初の問題を解決しました。ドキュメントが読み込まれた後、ブラウザはハッシュを読み取ってAJAXリクエストを実行し、ページとその動的なAJAX変更を表示します。

http://example.com/script.php#some-ajax-state

これでAJAX問題は解決しましたが、検索エンジンの問題はまだ存在していました。検索エンジンはページをロードして実行しませんブラウザのようなJavascript。

Googleが助けに。 Googleは、ハッシュ(#)の代わりにハッシュバング(#!)を含むURLがあると、検索ボットに、インデックス作成用の代替URLが存在することを示唆するスキームを提案しました。事。これについては、こちらをお読みください Ajaxクロール:はじめに

今日、ほとんどの主要なブラウザーでJavascriptのpushstateが採用されたことにより、これらすべてが廃止されています。 pushstateを使用すると、コンテンツが動的にロードまたは変更されるため、ページをロードすることなく現在のページのURLを変更できます。必要に応じて、ブックマークと履歴の実際に機能するURLを提供します。リンクはいつものように作成できますハッシュとハッシュバングなし

今日の時点で、古いブラウザーでFacebookをロードするとハッシュバングが表示されますが、現在のブラウザーはpushstateの使用を示しています。

117
Billbad

nique URLs をもっとチェックしたいかもしれません。

AJAXを介してページをロードし、「ハッシュ」(「#」の後に続く値)を解析して、ロードするページを決定します。また、このメソッドは、AJAX=リクエストがブラウザーの履歴にカウントされないため、「戻るボタンが壊れる」という性質があるために使用されます。ただし、ブラウザーはハッシュの変更を履歴に保存します。

ハッシュを使用して、ページを決定するためにハッシュを使用できるという事実は、AJAX要求されたページを「履歴に」保持できると言えます。それに加えて、ハッシュされたURLは単なるURLであり、ハッシュを含めてブックマーク可能であるため、AJAXリクエストされたページをブックマークすることもできます。

2
Joseph