Javascript HTML推送和弹出历史记录
我非常接近我试图实现的目标，但我有两个问题（据我所知）：Javascript HTML推送和弹出历史记录,javascript,html,html5-history,Javascript,Html,Html5 History,我非常接近我试图实现的目标，但我有两个问题（据我所知）： 如果用户导航到另一个站点（前进或后退按钮），然后返回，则最后一个“状态”不会正确注册到历史记录中，但会正确添加以前的任何“状态” Div层不会显示在Firefox中，除非使用向前或向后导航。单击以显示Div层，您可以看到它是否在一瞬间消失 HTML/JavaScript代码： <html> <head> <title>Test Nav</title> <script
<html>
<head>
<title>Test Nav</title>
<script language="JavaScript">
function clicked(divID) {
document.getElementById('divOne').style.display = 'none';
document.getElementById('divTwo').style.display = 'none';
document.getElementById(divID).style.display = 'block';
data = divID || null;
history.pushState(data,'Test','\Test04.html');
return event.preventDefault();
}
function updateContent(data) {
document.getElementById('divOne').style.display = 'none';
document.getElementById('divTwo').style.display = 'none';
document.getElementById(data).style.display = 'block';
window.alert(data);
}
window.addEventListener('popstate', function(event) {
updateContent(event.state);
});
history.replaceState(data, 'Test','\Test04.html');
</script>
</head>
<body>
<nav>
<ul class="cf">
<li><a href="#DivOne" onclick="clicked('divOne')">Div One</a></li>
<li><a href="#DivTwo" onclick="clicked('divTwo')">Div Two</a></li>
</ul>
</nav>
<div id="divOne" style="display: none">
This is Div One
</div>
<div id="divTwo" style="display: none">
This is Div Two
</div>
</body>
</html>
测试导航
已单击函数（divID）{
document.getElementById（'divOne'）.style.display='none'；
document.getElementById（'divTwo'）.style.display='none'；
document.getElementById（divID）.style.display='block'；
data=divID | | null；
pushState（数据，'Test'，'\Test04.html'）；
return event.preventDefault（）；
}
函数updateContent（数据）{
document.getElementById（'divOne'）.style.display='none'；
document.getElementById（'divTwo'）.style.display='none'；
document.getElementById（数据）.style.display='block'；
窗口报警（数据）；
}
window.addEventListener（'popstate'，函数（事件）{
updateContent（event.state）；
});
replaceState（数据'Test'，'\Test04.html'）；
这是第一组
这里是二区