检测网址变化

Question

我需要一个可以检测URL变化的工具，但页面不会进行后台提交(post back)，而是通过动态添加HTML中的

元素来实现变化。因此，URL页面的格式如下：

http://www.examplepage/conversations/44455

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

http://www.examplepage/conversations/44874

它不仅在结尾处改变，而是像这样改变。

http://www.examplepage/settings

不进行后台回发和重新加载JavaScript，那么我的问题是，有没有办法检测这些更改？使用事件监听器，但是如何实现？

我搜索了一下，大家都说要用哈希事件，但是我在任何哈希之后没有任何值，所以它不起作用。

编辑

仅供记录，我没有页面代码，也没有访问权限。我解释得更清楚一些，我正在做一个背景谷歌扩展程序，我刚刚在现有页面上添加了一个滑块，该页面以我上面解释的方式更改其URL。 URL像每个页面一样更改，但是他们更改了HTML内部的div，以便页面不必重新加载所有内容。

- Hyra10

---

你可以设置一个时间间隔并检查URL，但更好的想法是找到改变URL的代码并添加回调函数。 - I wrestled a bear once.

这些URL的更新何时会发生？也许可以在你预期URL改变时附加事件监听器来检查新值。 - Nick Zuber

@Pamblam 我无法控制该页面，因为我正在构建一个扩展程序，为这个页面添加功能。 - Hyra10

学习使用控制台。也许尝试使用VisualEvent。您没有提供足够的信息以获得有用的答案。作为扩展程序，这是您在问题中提供的类型信息。 - I wrestled a bear once.

@Pamblam 这是因为它不是扩展的一部分，它的工作方式不同，我已经搜索了与该扩展相关的内容。这就是为什么我只问JavaScript的原因，但无论如何谢谢，我会看看你建议的内容。 - Hyra10

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);

- resu

---

使用set Interval就解决了问题，感谢你的答案。我之前试图寻找某些事件或更为复杂的东西，但现在这个方法非常完美，再次感谢！ - Hyra10

目前唯一可用的监听器是 window.onhashchange，但在这种情况下并不有用，因为它只会寻找 url 中的 #hash 变化。 - resu

没有 onstatechange 事件吗？ - Muhammad Umer

@MuhammadUmer 不，至少目前不是。 - resu

Answer 2

没有一种干净的基于事件的方法可以从内容脚本中检测到这些URL更改。

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

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

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

   此方法在这里详细描述。

   缺点是，根据所涉及页面的代码，注入的脚本可能需要早期注入，需要run_at:document_start，这对页面加载性能来说并不理想。

2. 使用监听chrome.webNavigation.onHistoryStateUpdated事件的后台页。

   如果您需要在后台页中检测此操作 - 完美，您完成了，而无需使用内容脚本。

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

- Xan