检测url上的更改
我需要一些东西来检测url上的更改,但页面不会回发,它会动态更改,只添加html中的div,所以URL页面是这样的
HTTP://www.examplepage/conversations/44455
当我点击页面的另一部分时,它就是
HTTP://www.examplepage/conversations/44874
它不仅在最后变化,而且像这样
HTTP://www.examplepage/settings
没有回复和重新加载JavaScript所以我的问题是,有没有办法检测这些变化? 和事件监听器但如何?
我搜索并且每个人都说哈希事件,但是在任何哈希之后我没有任何值,所以它不起作用
编辑
只是为了记录,我没有页面的代码,也没有访问权限,我会更好地解释,我正在做一个后台谷歌扩展,我只是添加了一个幻灯片到现有页面,这个页面改变了我的方式我解释的方式以上。 url会像每个页面一样发生变化,但是它们会更改html中的div,以便页面不必再次收取所有内容
您需要在页面加载时将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);
没有“干净”,基于事件的方法来从内容脚本中检测此类URL更改。
它们使用history.pushState
API完成 – 并且使用该API不会发出任何DOM事件。
除了已经提到的基于轮询的方法之外,还有两种可能的基于事件的间接方法:
-
扩展可以使用注入的脚本覆盖
history.pushState
,以另外发出可以在内容脚本中侦听的DOM事件。这里详细描述了这种方法。
缺点是,根据所讨论页面的代码,注入的脚本可能需要提前注入,需要
run_at: document_start
,这对于页面加载性能来说是次优的。 -
使用侦听
chrome.webNavigation.onHistoryStateUpdated
事件的后台页面。如果你需要在后台页面中检测到这一点 – 完美,你就完成了,而不需要内容脚本。
如果需要在内容脚本中检测到此内容,可以在事件侦听器中使用
details.tabId
将消息发送到正确的内容脚本。