1

ドメインのサブパスに移動する場合、通常の方法は<a href="/somepath">Some Path</a>. これにより、ページが完全にリロードされます。

しかし、Facebook では、写真を開くと、アドレス バーの URL が変わりますが、ページ全体はリロードされず、写真プラットフォームのみが読み込まれます。このようにして、人々は写真のURLを共有できます。これはどのように行われるのだろうか？

私はいくつかの検索を行い、一部の人々は を使用することを提案しましたhistory.pushStateが、これはほとんどの最新のブラウザーでのみ機能します。Facebook のものも IE 7 で動作します。

4

2 に答える 2

2

あなたが言ったように、最新のブラウザー (特に IE>=10)history.pushStateでのみ使用できます。

古いブラウザの場合、(私が知る限り) URL を何らかの方法で変更する唯一の方法は、「ハッシュバン」手法を使用することでした。つまり、URL のハッシュの機能を使用/悪用してページ情報を保持していました。index.php#!page=x&foo=barすると、現在のページを表すためにハッシュが使用される場所と同様の URL になります。次に、URL は などのリンクを使用して 1 対 1 でマッピングされindex.php?page=x&foo=bar、ページを更新すると、JavaScript はハッシュを読み戻し、ページを適切に表示できます。これは決して優れた解決策ではありませんでした。特にブラウザは履歴を正しく保存しませんが、それでも非常に人気がありました。

Ajax を使用してページをリロードし、同時に URL を変更することを検討している場合は、おそらくHistory.js / Ajaxifyなどのライブラリを調べてください。これは、利用可能な場合は使用しようとしますpushStateが、可能な場合は hashbangs を使用するようにフォールバックします。に。

あなたは Facebook が Legacy IE の Ajax をサポートしていると考えているようです。IE7 が私のお気に入りのブラウザーであるとは言えないので、私はこれに気づいていませんが、IIRC Twitter は、古い、機能が充実していないブラウザーを使用する時間がはるかに少なく、非常に単純化されたインターフェースにフォールバックします (私 は思うに基本的なモバイル ビューも使用します)。それが私のウェブサイトである場合、私はおそらく同様のスタンスを取り、pushState利用可能な場合は利用し、そうでない場合は単にスタンドアロンのページを提供します. これらの領域で後方互換性を確保する作業はかなり骨が折れる傾向があり (上記のプラグインはかなりの負荷を軽減しますが)、サポートを提供する必要がない限り、それだけの価値はないのではないでしょうか?

于 2013-08-20T07:52:24.867 に答える
0

Facebookがどのようにそれを行ったかはわかりませんが、Backbone.JSの「ルーティング」の章を見ると、

History API をまだサポートしていないブラウザーの場合、Router は適切なフォールバックと URL のフラグメント バージョンへの透過的な変換を処理します。

さらに詳しく見ると、ソースコードには次のように書かれています。

// Backbone.History
// ----------------
// Handles cross-browser history management, based on either
// [pushState](http://diveintohtml5.info/history.html) and real URLs, or
// [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
// and URL fragments. If the browser supports neither (old IE, natch),
// falls back to polling.

これはonhashchangeに言及された記事です。それがおそらく進むべき道です。

于 2013-08-20T07:53:13.760 に答える