Question

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

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

Answer 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.
    }
}

现在这只是一个非常简单的示例，还有更多内容，比如检查浏览器支持，检查点击的链接是否与当前网址具有相同的href，识别不同的网址等等。我只是从一个复制了在对象文字中包含几千行代码的项目，因此您必须弄清楚popstate的工作原理以及如何在您自己的代码中使用它。

检测URL更改，无需散列或迭代

1 个答案: