防止页面不断重新加载

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;
   }
});

当newurl 被$('#go_btn') 按钮触发时，我还有下面的代码能够刷新页面。

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

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

Answer 1

请注意，只需调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。仅触发 popstate 事件 通过执行浏览器操作，例如单击后退按钮（或 在 JavaScript 中调用 history.back())。并且该事件仅被触发 当用户在相同的两个历史条目之间导航时 文件。

浏览器倾向于在页面加载时以不同方式处理 popstate 事件。 Chrome（v34 之前）和 Safari 总是在页面上发出 popstate 事件 加载，但 Firefox 没有。
根据 Mozzila 开发者网络
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 事件。它用于其他目的。

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