检测网址的更改

Question

我需要一些东西来检测 url 上的更改，但页面不会回发，它会动态更改，仅在 html 中添加 div，所以 URL 页面是这样的

http://www.examplepage/conversations/44455

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

http://www.examplepage/conversations/44874

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

http://www.examplepage/settings

无需回发并重新加载 JavaScript，所以我的问题是，有没有办法检测这些更改？和事件监听器但是如何呢？

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

编辑

仅供记录，我没有该页面的代码，也没有访问权限，我会更好地解释，我正在做一个后台谷歌扩展，我刚刚向现有页面添加了一个幻灯片，该页面按照我的方式更改其网址上面解释过。 url 会像每个页面一样发生变化，但它们会更改 html 内的 div，这样页面就不必再次收取所有费用

Answer 1

对于支持的浏览器，您可以使用

navigation.addEventListener("navigate", callback)

来检测 URL 中的更改。

navigation.addEventListener("navigate", e => {
    console.log(e.destination.url);
});

否则，您需要在页面加载时存储 URL 作为起点，并

setInterval

检查更改并据此进行修改。

以下代码每500ms进行一次检查：

// 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

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

它们是通过

history.pushState

API 完成的 - 并且使用该 API 不会发出任何 DOM 事件。

除了已经提到的基于轮询的方法之外，还有两种可能的间接基于事件的方法：

1. 扩展可以使用

   注入的脚本

   覆盖history.pushState，以额外发出可在内容脚本中侦听的 DOM 事件。

   此方法详细描述于此处。

   缺点是，根据相关页面的代码，注入的脚本可能需要提前注入，需要

   run_at: document_start

   ，这对于页面加载性能来说不是最佳的。

2. 使用监听

   chrome.webNavigation.onHistoryStateUpdated

   事件的后台页面。

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

   如果您需要在内容脚本中检测到这一点，您可以在事件侦听器中使用

   details.tabId

   将消息发送到正确的内容脚本。