2012-03-31 11 views
22

可能性の重複:
What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for?Twitter、Hash-Bang#のようなリンクは移動中です! URLの

ツイッターをそのリンクをどのように働くか、私が思っていました。

ソースコードを見ると、/#!/ i/connectや/#!/ i/discoverのようなリンクが使用されますが、JavaScript機能はload 'connect')や何か、それはページを再読み込みする必要はありません。それは単にページの内容を変更します。

私はthisページを見ましたが、それらのファイルはすべて存在しなければならず、そのうちの1つに直接進むことはできませんでした。私はTwitter上でそれらのファイルのそれぞれが存在しないこと、そしてそれが他の方法で扱われることを想像しています。私が間違っている場合は、私を修正してください。

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

+0

質問を重複としてマークすると、重複自体を参照するのに便利です。これはあなたが意味するものですか? http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for?lq=1 –

+0

あなたは真剣に受け入れられた答えを@ビルバッドはそれを非常にうまく説明しました! –

+0

@エミン大丈夫、私はそうした!この質問をしばらく前に振り返っていない – ixchi

答えて

96

「ハッシュ・バン」ナビゲーション、それは時々呼ばれていて、...

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

...がすぐに現代に非問題のおかげとなってきている一時的な問題のための一時的な解決策でありますブラウザ標準。おそらく、Facebookはすでに行っているように、Twitterはそれを段階的に廃止するだろう。過去には

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

は、リンクは2つの目的を務めた:それは、新しいドキュメントをロードおよび/または埋め込まれたアンカーにスクロールダウンして示すように、ハッシュ(#)。

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

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

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

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

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

これはAJAXの問題を解決しますが、検索エンジンの問題はまだを存在していました。検索エンジンはページを読み込まず、ブラウザのようにJavascriptを実行しません。

Googleを救助する。 Googleは、ちょうどハッシュ(#)の代わりにハッシュ・バン(#!)を持つ任意のURLが検索ボットに、 "_escaped_fragment_"変数を含む索引付けのための代替URLがあることを示唆するスキームを提案しましたもの。今日はそれについてここに読む...

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

、ほとんどの主要なブラウザではJavascriptをのpushstateの採用により、このすべてが時代遅れになってきています。 pushstateを使用すると、コンテンツが動的に読み込まれたり変更されたりすると、ページの読み込みを行わずに現在のページのURLを変更することができます。必要に応じて、ブックマーク&の履歴の実際の動作URLを提供します。それで、いつものようにリンクを作ることができますハッシュなし&ハッシュバング

現在のところ、古いブラウザでFacebookを読み込むとハッシュバングが表示されますが、現在のブラウザではpushstateの使用方法が示されます。

+2

すばらしい答え!私は全体のコンセプトを理解するために最後の1時間インターネットをブラウズしており、あなたはそれをとてもうまく説明しました。 –

+4

これは廃止されていません。特に、(リテラル)単一ページのアプリケーションを変更すると、URLが機能しなくなります。 Webサーバーをセットアップして、すべての要求をバックグラウンドで1ページにワイルドカードする必要があります。 – Caleb

+0

@Calebこれは非常に重要なことですが、私はいつも「ハッシュバングは死んでいる」のようなものを読んでいますが、誰もがその細部を見落としていることがよくあります。 – user4052054

2

Unique URLsで詳細を確認したい場合があります。

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

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

+0

Twitterが/#!/ URLパスをどのように持っていますか?それは#を追加するだけです。また、その実例がありますか? – ixchi

+1

ライブサンプルが必要な場合は、Twitterを使用してください。 'window.location.hash'は、'#!/ i/connect'や '#!/ i/discover'のような"# "(ハッシュを含む)の後に何かを返します。次に、その文字列を使用して、AJAX経由でロードする場所を決定することができます。どのサイトがハッシュを使ってどこに行くかを決める場所によって異なります。ハッシュ後にデータを解析する方法は標準的にはありません。 twitterのケースでは、最初の '/'の後に解析を開始します。 '/#!/'や '/# 'だけをタイプすると、ホームページがロードされます。 – Joseph

+0

私はwindow.location.hasに関連するコードを見ていて、それが何を意味するのか分かりません。 b = window.location.hash.split( "?")[0]、c = b.match(/#/)&& b(function(){var a = document.getElementsByTagName( "html")[0] .replace(/#[!]?[\ /]?/、 "")!== ""; c?a.className + = "remove-prerendered-content" :(a.className + = "use-prerendered-content ")、a.getAttribute(" data-nav-highlight-class-name ")&&(a.className + =" "+ a.getAttribute(" data-nav-highlight-class-name ")))))))); ' – ixchi

関連する問題