我在两个链接之间来回移动并使用ajax更改内容。问题是当我试图向后移动到index.php时
这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="bk/jquery-3.3.1.min.js" charset="utf-8"></script>
</head>
<body>
<a href="admin.html">Admin</a>
<a href="content.html">Get Content</a>
<div id="content"></div>
</body>
</html>
<script>
$(function() {
$('body').find('a').off('click').click( function(e) {
e.preventDefault();
history.pushState(null, null, $(this).attr('href'));
callPage($(this).attr('href'));
});
function callPage(ref) {
$.get(
ref,
function(data) {
$('#content').html(data);
},
'text'
);
}
$.ajaxSetup({ cache: false });
$(window).on('popstate', function() {
callPage(location.pathname.split('/').pop());
});
});
</script>
admin.html和content.html的内容分别是Admin和Hello World，分别用h1标签包装。每当我按下后退按钮并到达索引时，我总是遇到这个错误：
并在浏览器中：view in browser after reaching the index
据说不是那样的。有什么建议可能是什么原因？
当你回到index.html时，可能会尝试将自身的副本加载到div＃content中。这可能会导致许多意想不到的结果：它将加载你的jquery库的第二个副本和各种其他奇怪的东西。
更可靠的做法是将您的“虚拟”路径放在哈希标记之后，如下所示：http://test.com/index.html#/admin.html。这样重新加载/刷新事件也会起作用。像这样的东西：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<a href="#/admin.html">Admin</a>
<a href="#/content.html">Get Content</a>
<div id="content"></div>
<script>
$(function() {
function callPage(ref) {
if(ref!=='') {
$.get(
ref,
function(data) {
$('#content').html(data);
},
'text'
);
} else $('#content').html('');
}
$.ajaxSetup({ cache: false });
var fnHashchange = function() {
var path = location.hash.replace(/^#/,'');
callPage(path);
}
$(window).on('hashchange', fnHashchange);
fnHashchange();
});
</script>
</body>
</html>
另外，另外，将脚本标记放在html标记之外并不是一个好习惯。大多数浏览器都会解析它，但我不相信它是合法的HTML。