我已经开始玩 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 时发生的情况。第三张图片是我点击浏览器返回时发生的情况。