FBはページをリロードせずにページをリフレッシュする方法（xmlHttpRequest）では、[戻る]ボタンはまだ動作しますか？

Question

FBはページを再読み込みせずにリフレッシュする方法（xmlHttpRequest）でも、前/後のボタンは引き続き通常どおり動作しますか？

history.pushState()の方法を使用しているわけではありません。 PushState()はURL文字列のみを変更しますが、[戻る]ボタンをクリックすると前のページを表示するのに何もしません。だからそれは違う。

ここに私のコードと例があります。

私はそのようなサイトを持っています（下の写真を見てください）。 Header-divおよびContent-div。最初に開いたときに、URLはmysite.com/page1.php.です。ページをリロードせずにContent-divのコンテンツを変更したいと思います。 Content-divに新しい情報が表示されます。 URLはmysite.com/page2.phpに変更されます。

ここにHTMLコードがあります。

<div id="content"></div> 

<a href="" id="relaodLink">Reload Content</a> 

ここにJSコードがあります。

document.getElementById("relaodLink").onclick = function() { 
    var xmlHttp = new XMLHttpRequest(); 

    xmlHttp.open("GET", "page2.php", true); 
    xmlHttp.send(); 

    xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
      document.getElementById("content").innerHTML = xmlHttp.responseText; 
     } 
    } 
    return false; 
} 

ので、ヘッダーはrelaodLink、コンテンツdivの変化におけるコンテンツだけを押した後にリロードするべきではありません。そして最も重要なのは、ページが実際に再読み込みされたようにURLが変わることです。 「戻る」ボタンはmysite.com/page1.phpに移動し、「進む」ボタンを押すとmysite.com/page2.phpに戻ります。 history.pushState()メソッドでは動作しません。しかし、FBのBack and Forward Buttonsではうまく動作します。それを作る方法？

a busy cat http://www.ljplus.ru/img4/a/_/a_ya_vishe/primer-xmlhttp_3.jpg

Answer 1

これは素晴らしい質問です。あなたが確認した場合、Ajax上に完全に構​​築されていますが、戻るボタンと進むボタンはGmailでも動作します。

ブラウザの戻るボタンと進むボタンは、アドレスバーにあるものを保存する際に機能します。だからAjaxでは、アドレスバーにあるものを決して変更しないと、それは履歴には入っていないので、前後のボタンは機能しません。

これを行うには、アドレスバーに何かを追加する必要があります。
例：gmail、
受信トレイをクリックしたとき - https://mail.google.com/mail/？ タブ= mm＃受信トレイ
[スター付き]をクリックした場合 - https://mail.google.com/mail/？ タブ= mm＃スター付き
送信された場合 - https://mail.google.com/mail/？ タブ=ミリメートル＃が、だから、このようにバーに対処するために追加し続けGmailに

を送りました。したがって、歴史は保存されています。 facebookでも同様です。ページは更新されませんが、アドレスバーの場所が変更されました。これがここのキーです！

私はそれがあなたを助けてくれることを願っています！