javascript - 防止页面不断重新加载

Question

我在函数内使用window.history.pushState({)。这按预期工作得很好。下面是一个示例。

$('#go_btn').click(function(){
   if ($('.green')) {
        var newurl = "cutomurl.html";
        if(newurl!=window.location){
             window.history.pushState({path:newurl},'',newurl);
        }
        return false;
   }
});

并且我还获得了以下代码，以便在 $('#go_btn') 按钮触发 newurl 时刷新页面。

$(window).on('popstate', function(){ 
    location.reload(true); 
});

在桌面版本上我似乎没有任何问题。但是，当我尝试在 iPad 上加载此页面时，它会不断地重新加载该页面。那么如何停止持续重新加载并仅在触发 window.history.pushState({path:newurl},'',newurl); 时才刷新页面？

Answer 1

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.
According to Mozzila Developer Network
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Safari 总是在页面加载时发出 popstate 事件。这意味着

1. 您的页面已加载
2. 发生 Popstate 事件
3. location.reload() 执行
4. 重复

更新:请阅读有关操纵浏览器历史记录的文档。 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

看来您误解了某些功能。

您有一个#go_btn 按钮。当您单击它时，您希望页面能够:

1。重新加载

使用location.reload()

if (newurl != window.location)
{
    // window.history.pushState({path:newurl},'',newurl);
    location.reload(true);
}

2。导航到新网址

使用location.href。它将在当前窗口中打开新页面。

if (newurl != window.location)
{
    // window.history.pushState({path:newurl},'',newurl);
    location.href = newurl;
}

3。更改浏览器历史记录和地址栏中的 URL，无需执行任何操作。

使用window.history.pushState()或window.history.replaceState()。它不会打开新页面或重新加载它。仅当您不打算导航但希望用户获取新 URL(方便浏览、历史记录或收藏夹)时才使用它。

if (newurl!=window.location)
{
    window.history.pushState({path:newurl},'',newurl);
}

在所有这三种情况下，您都不需要 popstate 事件。它用于其他目的。

您需要哪一个？这取决于你的任务。
无论如何，将它们中的任何两个一起使用并不是不合逻辑且无用的。如果要刷新页面，推送历史状态的原因是什么？然后导航到它。