26

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

Twitterがそのリンクをどのように機能させるのか疑問に思いました。

ソースコードを見ると、リンクは/#!/ i / connectまたは/#!/ i / Discoverのように実行されていますが、load('connect')のようにJavaScript関数がアタッチされていません。または何か、そしてそれはページのリロードを必要としないこと。ページの内容を変更するだけです。

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

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

4

2 に答える 2

124

「ハッシュバン」ナビゲーション、それは時々呼ばれるように、...

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は、ハッシュ(#)の代わりにハッシュバン(#!)を使用するURLが、「_escaped_fragment_」変数などを含むインデックス作成用の代替URLがあることを検索ボットに示唆するスキームを提案しました。もの。ここでそれについて読んでください:Ajaxクロール:はじめに。

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

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

于 2012-04-27T17:57:31.040 に答える
2

一意のURLについて詳しく調べたいと思うかもしれません。

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

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

于 2012-03-31T01:24:00.400 に答える