无需散列或迭代即可检测 URL 更改答案

【问题标题】：Detect URL change without hash or iteration无需散列或迭代即可检测 URL 更改
【发布时间】：2013-02-17 06:07:00
【问题描述】：

我有一个 Google 即时类型的东西，其中 URL 将通过历史 API 更改。当用户从一个查询转到另一个查询，然后点击后退按钮，但没有任何反应时，就会出现问题。地址栏中的 URL 改变了，就是这样。我需要检测何时按下后退/前进按钮，或 URL 何时更改，以及触发和事件。我只关心这个在现代浏览器中的工作，因为无论如何我的网站只能由现代浏览器访问。

我也不想使用迭代，因为它不是即时的，也不像事件那么简单。还有其他更简单的方法吗？谢谢。

【问题讨论】：

标签： javascript html html5-history

【解决方案1】：

只要使用 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 是如何工作的以及如何在自己的代码中使用它。

【讨论】：

我刚刚尝试过这样的事情。它不允许前进按钮工作，当有人导航到该页面并尝试返回上一页时，它不允许他们这样做。我刚刚添加了这段代码： window.addEventListener('popstate', function (event){ document.getElementById('blahfield').value = decodeURIComponent(window.location.pathname.substring(window.location.pathname.lastIndexOf('/ ') + 1)); req(); });