2

Facebookのようにナビゲーションバーを更新せずにコンテンツをロードする方法を見つけようとしています。

Facebook のプロフィール (タイムラインではない) を見ると、左側の列に「ウォール」、「情報」、「写真」、「友達」などのナビゲーション バーがあります。

そして、例えば「wall」をクリックすると、url がwww.facebook.com/yourid?sk=wallになり、中央の列が更新されてコンテンツが読み込まれます。ただし、これは左側のナビゲーション バー (上部のメニュー バーも) を更新せずに発生します。

これはどのように作動しますか？

私はwww.example.com/profile.php?id=1234、ナビゲーションバーのあるメインページである のような URL を持つ php Web サイトに取り組んでおり、ユーザーがページを作成すると、URL は になりwww.example.com/profile.php?id=1234&page=1ます。&page=1ナビゲーション バーの部分を更新せずにそのコンテンツを読み込むにはどうすればよいですか?

======================================

タイトルから (javascript なしで) を削除しました。Facebookはjavascriptなしでそれを行うと思っていましたが、間違っていました。

4

4 に答える 4

7

まず第一に、Facebook はそのために JavaScript を使用していると確信しています。ブラウザで JavaScript を無効にしてから、もう一度試してみてください。

PHP はサーバー側であるため、ページの一部を更新する場合は、更新する部分を決定する場所であるため、ページ全体をサーバーに送信する必要があります。

あなたができることは、iframeを使用することです。メニューを含む iframe、コンテンツを含む iframe の場合、コンテンツ iframe のみを更新できます。とはいえ、私はさまざまな理由でフレームのファンではありません。Jscriptを使用する方が良いでしょう:)

アップデート

数年前から、シングル ページ アプリケーション (サーバー上で完全に更新する必要なく、ブラウザー内で完全に実行される Web アプリケーション) の人気が大幅に高まっています。

基本的に、Angular や React などのフロントエンド JavaScript フレームワークを使用してアプリケーションをコーディングします。その結果、リロードしない単一ページの Web サイトになります。

于 2012-07-10T06:24:46.890 に答える
2

すでにコメントされているように、これは JavaScript で行われます。PHP はサーバー側の言語なので、クライアント側でこのような効果を処理します。Facebook は JavaScript を使用しており、その多くはサイトでさまざまな効果を実現しています。

于 2012-07-10T06:26:03.843 に答える
1

iframeを使用してそれを行うことができると思います-メインのプロファイルページにはiframeが含まれます-メインのURLがwww.example.com/profile.php?id=1234表示され、ユーザーがリンクをクリックすると、iframeのみがURLでリロードされますwww.example.com/profile.php?id=1234&page=1

ナビゲーション リンクは同じままです。

于 2012-07-10T06:25:02.640 に答える
0 
var iDiv = document.createElement('div');
iDiv.id = 'newDiv';//give u'r div an id
document.getElementsByTagName('body')[0].appendChild(iDiv); //append the div    to   your html body 
$( "#newDiv" ).insertAfter( $( "#nameOfDiv" ) ); 
                 //moving it after your desired div(which is nameOfDiv here) 
$('#newDiv').load('somePage.php'); //load desired page in newDiv 
//or 
$('#newDiv').html('some text here')

あなたはあなたのURLを次のように見たいと思っていますwww.example.com/profile.php?id=1234&page=1。http://tutorialzine.com/2009/09/simple-ajax-website-jquery/をご覧ください 。とても役に立ちます。

于 2015-02-02T06:24:04.883 に答える