41

我的扩展应该加载一个内容脚本 searchTopic.js，只有在它注入的页面已经完全加载之后（是的，我在扩展清单中将“run_at”设置为“document_end”），但实际上它是在之前加载的所有 DOM 对象都已创建（关键的对象是通过页面中的一些 Javascript 创建的）。所以，问题是，我怎样才能等到页面的 Javascript 执行完毕？这是我的清单：

"content_scripts": [
  {
  "run_at": "document_end",
  "matches": ["https://groups.google.com/forum/*"],
  "js": ["searchTopic.js"]
  }
],
4

3 回答 3

64

"run_at": "document_end"相当于DOMContentLoaded。 也就是说，它在静态HTML 加载之后、但在慢速图像和慢速完成 javascript 之前触发。

因此，您不能仅通过单独设置清单来设置内容脚本在页面的 JS 之后触发。您必须在内容脚本本身中为此编写代码。

对于内容脚本，"run_at": "document_end"将在onload事件之前触发（与默认值不同document_idle——它可以在不可预测的时间触发）。

因此，第一步是load在内容脚本 ( searchTopic.js) 中使用如下代码等待事件：

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    // DO YOUR STUFF HERE.
}


如果您关心的脚本需要一段时间才能完成，您将不得不根据具体情况轮询某些条件。例如：

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    var jsInitChecktimer = setInterval (checkForJS_Finish, 111);

    function checkForJS_Finish () {
        if (    typeof SOME_GLOBAL_VAR != "undefined"
            ||  document.querySelector ("SOME_INDICATOR_NODE_css_SELECTOR")
        ) {
            clearInterval (jsInitChecktimer);
            // DO YOUR STUFF HERE.
        }
    }
}
于 2012-12-17T16:07:23.550 回答
3

script元素按顺序执行。如果. script_ body这保证工作，否则document.write()将停止工作。

所以你有两个解决方案：

  1. 使用该onload事件来加载您的代码。
  2. 添加一个脚本标签作为页面的最后一个元素（元素中的最后一个body元素）。此脚本将在所有其他脚本完成后以及正文已转换为 DOM 树后执行。
于 2012-12-17T16:08:28.667 回答
-1

您使用 window.load 方法。

function addLoadEvent(a) {
    var b = window.onload;
    "function" != typeof window.onload ? window.onload = a : window.onload = function () {
        b && b(),
            a()
    }
}
function init() {
    alert('init');
}
addLoadEvent(init);
于 2017-07-20T05:25:22.467 回答