onpopstate返回数据两次

Question

我已经开始玩onpopstate了，但是遇到了一个问题。 每当我单击浏览器上的“后退”按钮时，URL都会发生相应的更改，但是页面代码被加载了两次，因此我收到两个列表和两个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会将onpopstate的内容test1.php到#insert div中。 由于登录页面也是test1.php这将导致屏幕截图中出现重复项。

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

Answer 2

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