使用 window.location.href 更改 URL 后如何知道 DOM 何时再次准备就绪答案

【问题标题】：how to know when the DOM is ready again after changing URL with window.location.href使用 window.location.href 更改 URL 后如何知道 DOM 何时再次准备就绪
【发布时间】：2011-10-11 14:42:25
【问题描述】：

我正在使用 Add-on SDK 编写一个 Firefox 扩展，并且我成功地从内容脚本扫描了一个站点，现在想更深入地了解。但是，当我用

更改网址时

window.location.href = "http://www.thatsite.com/foo.php";
alert($('#abc');

我无法访问新的 DOM。警报会在站点被完全读取之前出现。我试过$(document).ready(function()，但它似乎只工作一次......

如何才能等到站点完全构建完成？

【问题讨论】：

什么样的扩展？用户脚本？显示更多代码。
我只是想看看这个网站上的一个复选框是否被选中。
@Weedjo：问题是：您如何加载该代码？您使用的是附加 SDK 的 page-mod 模块吗？或者你有一个经典的扩展并从一个叠加层运行代码？
@WladimirPalant：是的，我正在使用 pageMod。

标签： javascript dom firefox-addon firefox-addon-sdk

【解决方案1】：

您的内容脚本仅在页面加载期间有效 - 如果您导航到其他页面，此内容脚本实例将被卸载。内容脚本的另一个实例将被加载到新页面中，但是您可以在那里执行所有必要的操作。唯一的问题是将数据从旧实例传递到新实例。您可以使用postMessage() 将数据发送到插件，然后让插件将其发送到onAttach() 处理程序中的新内容脚本。在您的情况下这是否可能取决于您要实现的目标（您没有在问题中这么说）。

【讨论】：

@Weedjo：这就是为什么它是一个内容脚本，它只适用于一个页面。如果您只需要加载页面并查看它：不要导航到它，将其加载到 <iframe> 元素或使用 XMLHttpRequest。
谢谢弗拉基米尔！我有一个完美的主意，因为您写了 “内容脚本的另一个实例将被加载到新页面中......” 我刚刚检查了 if(window.location.href != "http://www.page1.com") 等等！它工作得很好:)感谢你们所有人:)
但现在我意识到我在数据交换方面会遇到问题......嗯......有什么想法吗？
我用<iframe> 完成了它，它似乎工作得很好:) 谢谢

【解决方案2】：

如果您想与位置变化的标签进行交互，您需要将您的 JS 移动到更高的级别。请参阅：MDC docs。实际上，您的 JS 在当前页面的上下文中被应用一次。新页面加载后，实际上是不存在的。

真的，无论如何，您都不应该像从插件那样与页面进行交互。这种行为类似于 Greasemonkey 用户脚本，而不是 Firefox 扩展。

【讨论】：

使用 Add-on SDK 构建的插件实际上是正常行为，尤其是在使用 page-mod 模块时。