检测 url 上的变化

Question

我需要一些东西来检测 url 上的变化，但页面没有返回 post，它会动态变化，只在 html 中添加 div , 所以 URL 页面是这样的

http://www.examplepage/conversations/44455

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

http://www.examplepage/conversations/44874

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

http://www.examplepage/settings

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

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

编辑

郑重声明，我没有页面代码，也没有访问权限，我会更好地解释，我正在做背景 google 扩展，我只是在现有页面上添加了一张幻灯片，此页面按照我上面解释的方式更改其 url。 url 像每个页面一样变化，但它们会更改 html 内的 div，这样页面就不必再次收取所有费用

Answer 1

您需要在页面加载时存储 URL 作为起点，setInterval 以检查更改并据此进行修改。

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

// store url on load
let currentPage = location.href;

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

Answer 2

没有 "clean" 基于事件的方法来检测内容脚本中的此类 URL 更改。

他们用 history.pushState API 完成了 - 使用 API 不会发出任何 DOM 事件。

除了已经提到的 :

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

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

详细描述了此方法 here。

缺点是，根据相关页面的代码，注入的脚本可能需要提前注入，需要 run_at: document_start，这对页面加载性能来说不是最佳选择。
使用监听chrome.webNavigation.onHistoryStateUpdated event的后台页面。

如果你需要在后台页面中检测到这个——完美，大功告成，根本不需要内容脚本。

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

检测 url 上的变化

Detect changes on the url

javascript

url

jquery

google-chrome-extension

dom-events