Question

我需要一些东西来检测网址上的更改，但页面没有回发，它会动态更改，只添加html中的div，所以URL页面是这样的

http://www.examplepage/conversations/44455

当我点击页面的另一部分时，它就是

http://www.examplepage/conversations/44874

它不仅在最后改变，而且像这样

http://www.examplepage/settings

没有回复并重新加载javascript所以我的问题是，有没有办法检测这些变化？和事件监听器但如何？

我搜索并且每个人都说哈希事件但是我在哈希之后没有任何价值所以它不起作用

修改

仅仅为了记录，我没有页面的代码，也没有访问权限，我会更好地解释，我正在做一个后台谷歌扩展，我只是添加了一个幻灯片到现有页面，这个页面改变了它url我上面解释的方式。网址会像每个页面一样发生变化，但是它们会更改html中的div，以便页面不必再次为所有内容收费

Answer 1

您需要在页面加载时将URL存储为起点，并使用setInterval检查每个 n毫秒 以进行更改，然后根据该值进行修改。

以下代码每秒检查两次（500毫秒）：

// store url on load
var currentPage = window.location.href;

// listen for changes
setInterval(function()
{
    if (currentPage != window.location.href)
    {
        // page has changed, set new page as 'current'
        currentPage = window.location.href;

        // do your thing...
    }
}, 500);

Answer 2

没有“干净”，基于事件的方法来从内容脚本中检测此类URL更改。

它们使用history.pushState API完成 - 并且使用该API不会发出任何DOM事件。

除了已经提到的poll-based one：

之外，还有两种可能的基于事件的间接方法

扩展程序可以使用injected script覆盖history.pushState，以另外发出可在内容脚本中侦听的DOM事件。

详细描述了这种方法here。

缺点是，根据相关页面的代码，注入的脚本可能需要提前注入，需要run_at: document_start，这对于页面加载性能来说是次优的。
使用侦听chrome.webNavigation.onHistoryStateUpdated event的背景页。

如果您需要在后台页面中检测到这一点 - 完美，你已经完成了，而不需要内容脚本。

如果需要在内容脚本中检测到此内容，可以在事件侦听器中使用details.tabId将消息发送到正确的内容脚本。

Answer 3

您可以尝试以下方法：

 if ("onhashchange" in window) {
     console.log('change');
 }

到目前为止，这是唯一对我有用的东西。

检测网址上的更改

3 个答案: