15

Facebookページを閲覧する場合、ヘッダーと固定フッターのセクションはページの読み込み間も表示されたままになり、それに応じてアドレスバーのURLが変更されます。少なくとも、それは私が得る幻想です。

Facebookは技術的に言えばそれをどのように達成しますか？

4

5 に答える 5

39

スタイリングの方法については、Mark Brittinghamの回答を参照してください。ただし、ここで求めているのはそれではないと思います。それがどのように機能するか（そしてなぜそれがかなり素晴らしいのか）についての技術的な詳細をあなたに与えるでしょう。

ヘッダーの[プロファイル]リンクにカーソルを合わせると、ステータスバーが表示されます...

http://www.facebook.com/profile.php?id=514287820&ref=profile

ここで、その<a>タグがポイントされます。クリックするとアドレスバーが表示されます...

http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile

「＃」フラグメント識別子/ハッシュに注意してください。これは基本的に、あなたがページを離れておらず、前のリクエストがAJAXで行われたことを証明しています。これらのリンクのクリックイベントをインターセプトし、デフォルトの機能を独自のものでオーバーライドしています。

これをJavascriptで実現するには、クリックイベントハンドラーをこれらのリンクに割り当てるだけです...

var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');

for(var i = 0, l = headerLinks.length; i < l; i++) {
  headerLinks[i].onclick = function() {
    var href = this.href;

    //Load the AJAX page (this is a whole other topic)
    loadPage(href);  

    //Update the address bar to make it look like you were redirected
    location.hash = '#' + href;

    //Unfocus the link to make it look like you were redirected
    this.blur();

    //Prevent the natural HTTP redirect
    return false;
  }
}

このアプローチのすばらしい利点の1つは、戻るボタンを機能させることができることです（少しトリックを追加します）。これは、従来、慢性的なAJAX使用の痛みを伴う副作用でした。このトリックが何であるかは100％わかりませんが、ブラウザがフラグメント識別子を変更するタイミングを何らかの形で検出できると思います（おそらく500ミリ秒ごとにチェックすることで）。

ちなみに、ハッシュをDOM内で（要素IDを介して）見つけることができない値に変更すると、ページが一番上までスクロールされます。私が話していることを確認するには、Facebookの上部から約10ピクセル下にスクロールして、上部のメニューの半分を表示します。アイテムの1つをクリックすると、フラグメント識別子が更新されるとすぐに（ウィンドウの再描画/再描画の遅延なしに）ページの上部にジャンプして戻ります。

于 2009-03-21T00:28:32.757 に答える
3

不変に見えるヘッダーとフッターを提供する1つの方法は、CSSを使用することです。これは固定フッターの例です（「position：fixed;」に注意してください）。

#Footer  { 
  font-size:xx-small; 
  text-align:left; 
  width:100%; 
  bottom:0px; 
  position:fixed; 
  left:0px; 
  background-color: #CCCCCC; 
  border-top: 1px solid #999999; 
  padding:4px; 
  padding-right:20px; 
  color:#666666; 
}

固定フッター（Margin-Topを使用するヘッダーと同じ）用のスペースを残すために、ページdiv（ページの主要部分を埋めるもの）にMargin-Bottomを追加することを確認する必要があります。

これは実際にはページ上にとどまりませんが、配置が非常にタイトで不変であるため、ページの読み込みに時間がかかりすぎない限り、そのように表示されます。これがFaceBookの機能であるかどうかはわかりませんが、ほぼ同じ効果が得られます。

于 2009-03-21T00:19:48.190 に答える
0

そうですね、そのようなことを達成する方法はAJAXを使用することですが、私が見る限り、Facebookは実際にはこれを行いません...チェックしたところ、ほとんどのサイトのようにヘッダーが更新されます...

編集：私が最初にこれに答えたとき、私はGoogle Chrome（2.0）でFacebookを見ていましたが、何らかの理由で実際にはこのようにはなりません->ホームページから[マイプロファイル]をクリックすると、これが表示されますアドレスバー：http ：//www.facebook.com/profile.php？id = 1304250071＆ref = profile

したがって、ページ全体を更新します...奇妙な

于 2009-03-21T00:19:55.617 に答える
0

Josh Stodola の回答を補強するには: 私の理解では、 YUI Bookmark Managerはまさにこの仕事をします。

于 2009-03-22T07:36:52.157 に答える
0

CSS の絶対/固定配置では、ヘッダーとフッターを含む div タグを HTML のどこにでも配置できます。上のように！

現在のほとんどのブラウザーでは、レンダリングの遅延があり、Firefox では 1/4 秒だと思います。そのため、ページは部分的にレンダリングされたコンテンツをすばやく表示せず、ネットワーク データが入ってくると描画に多くの時間を浪費します。

そのため、新しいページがスタイルとヘッダーとフッターを含む HTML をすばやく返す可能性があります。このコンテンツはブラウザですぐにレンダリングできるため、次のページを表示すると、それらが変化していないように見えます。

ページが動的コンテンツを生成している場合、すべての静的情報を先頭に配置し、それを出力してデータ バッファーをフラッシュするのが良い方法です。次に、動的データベース クエリなどを実行します。

于 2009-03-21T00:29:38.853 に答える