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。

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

据我所知，如果我加载新的 url http://example.com#newURL，e.state 应该指向我推送的对象推送状态。

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

Answer 1

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

您可以为您的 URL 使用参数，这样您就可以测试请求是来自历史调用还是来自地址栏中的 URL。

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