我有一个 Google-instant 类型的东西,其中 URL 将通过历史记录 API 更改。当用户从一个查询转到另一个查询,然后单击后退按钮,但没有任何反应时,就会出现问题。地址栏中的 URL 发生变化,就是这样。我需要检测何时按下后退/前进按钮,或者何时 URL 更改,以及触发和事件。我只关心它在现代浏览器中的工作情况,因为无论如何我的网站只能通过现代浏览器访问。
我也不想使用迭代,因为它不是即时的,也不像事件那么简单。还有其他更简单的方法吗?谢谢。
最佳答案
只要使用 Pushstate 更改 URL,就会触发 Windows popstate 事件,您应该使用该事件通过 ajax 或您正在使用的任何内容更改网站内容,因为该事件也会在浏览器后退/前进按钮上触发。在某些浏览器中,它也会在首次页面加载时触发,因此您也需要检查这一点。
我真的没有时间编写带有事件处理程序之类的完整的原生 JS 示例,但这里有一个快速的 jQuery 版本:
var checkForFirstLoad = true;
$(window).on({
load: function() {
checkForFirstLoad = false;
},
popstate:function(e) {
if (checkForFirstLoad) {
updatePage(e.originalEvent.state!=null ? e.originalEvent.state.page : document.location.pathname, true);
}else{
checkForFirstLoad = false;
}
}
});
function updatePage(pageURI, type, switchContent) {
if (!type) {
history.pushState({ page: pageURI }, page, pageURI);
}
if (switchContent) {
//replace site content etc.
}
}
现在这只是一个非常简单的例子,还有很多事情要做,比如检查浏览器支持、检查单击的链接是否与当前 url 具有相同的 href、识别不同的 url 等。我刚刚从项目在对象字面量中包含几千行代码,因此您必须弄清楚 popstate 的工作原理以及如何在自己的代码中使用它。
关于javascript - 无需哈希或迭代即可检测 URL 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14918466/