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

Question

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

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

Answer 1

当popstate事件被pushstate改变时，就会触发windows事件，这就是你应该使用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是如何工作的以及如何在你自己的代码中使用它。