Question

这会将内容加载到页面并更改URL。问题是后退按钮和前进不会加载内容agin。他们只更改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();

    }

Answer 1

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

后台按钮与Ajax加载内容

1 个答案: