Question

我已经开始玩onpopstate但遇到了问题。每当我点击浏览器上的后退按钮时，网址都会相应更改，但页面代码会加载两次，因此我会收到两个列表和两个div。为什么它产生了两倍的代码，我该如何修复它？示例代码如下。

<style type="text/css">

div {width: 200px; height: 200px; border: 1px solid;}

</style>

<ul>

   <li class="sour">

   <input type="button" value="1"/>

   </li>

</ul>

<script type="text/javascript" >


$('ul li:nth-child(1)').click(function() {
var url = $(this).index();  
$('#insert').load('1.php');
window.history.pushState('', '', 'test1.php?challenge=' + url);
e.preventDefault();
});


window.onpopstate = function(event) {
  $('#insert').load(location.pathname); 
};

</script>


<div id="insert">

<p>hello there</p>

</div>

以下是1.php的内容

<p>first file</p>

这是我拍摄的视觉效果截图的链接。第一张图片是我第一次加载屏幕时的图像。第二个图像是按下按钮1时发生的情况。第三个图像是我点击浏览器时发生的情况。

http://imgur.com/Nsqej,E1Ydc,sFCLl#0

Answer 1

根据您描述的问题序列，onpopstate会将test1.php的内容加载到#insert div中。由于着陆页也是test1.php，因此会在屏幕截图中显示重复内容。

使用jquery-pjax可以解决别人的问题。如果你不依赖于jquery，那么还有其他解决方案可能比滚动你自己更容易。

Answer 2

您可能已经在某处包含了两次jQuery库。

onpopstate两次返回数据

2 个答案: