javascript 历史 onpopstate

Question

我正在尝试理解 HTML5 历史对象。这是我开始时的一个简单示例。

    function addDialog(){
         document.getElementById('d').style.display ='';
         history.pushState({name:"changed"},"","#newURL");
    }

    window.onpopstate = function(e){  
        alert(e.state);
    }

我有一个 id 为 d 的 div，其 display 属性为 none。单击链接时，我将显示 div 并更改历史记录，以便加载新的 url。

当我复制粘贴新网址时，popstate 事件被触发，并且我得到 e.state 的 null 。

据我了解，如果我加载新网址 http://example.com#newURL，e.state 应该指向我使用 Pushstate 推送的对象。

如果我错了，请纠正我，我也想知道 e.state 何时被填充。

Answer 1

正如我测试的，e.state 仅获取当您单击“后退”或“前进”按钮时添加到历史记录中的弹出状态。否则，它会给你 null。

您可以对 URL 使用参数，以便测试请求是来自历史记录调用还是来自地址栏中的 URL。

onpopstate = function(event) {
    alert('popEvent: ' + event);
    if(event.state){
        setupPage(event.state);
    } else {
        setupPage(getQStringParam('zid'));
    }
}