使用 Ajax 加载内容的后退按钮答案

【问题标题】：Backbutton With Ajax loading Content使用 Ajax 加载内容的后退按钮
【发布时间】：2013-05-14 02:51:29
【问题描述】：

这会将内容加载到页面并更改 URL。问题是后退按钮和前进不会再次加载内容。他们只更改 URL。我怎样才能让他们加载函数？

 <a onclick="load_content('p1');" >Page1</a>
 <a onclick="load_content('p2');" >Page2</a>



function load_content(name)
    {

    window.history.pushState(null, null, "/?page=" + name + "");

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {

        document.getElementById("response").innerHTML=xmlhttp.responseText;

        }
      }
    xmlhttp.open("GET","load_content.php?name=" + name + "",true);
    xmlhttp.send();

    }

【问题讨论】：

标签： php javascript html ajax browser-history

【解决方案1】：

在history.pushState 中，保存所有动态的相关数据，然后监听popState 事件并替换所有元素，就像使用 AJAX 一样。

【讨论】：

你能发布一些我一直在尝试用 popstate 收听但我找不到方法的例子，谢谢你的时间！
但不是获取静态数据（链接中的 innerHTML），而是将所有动态数据存储在 pushState 中并在 popState 中检索。