Question

是否存在每次添加/加载脚本时都会触发的DOM事件？

我正在构建一个扩展，该扩展必须等待某个特定的全局窗口对象可用并且需要等待它存在。

Answer 1

这里是一个示例，用于检测何时将脚本标签1：添加到页面中，然后2：加载。（我在NodeList上的循环可能需要一些工作。）

检测脚本标记

//Wait for the initial DOM...
document.addEventListener('DOMContentLoaded', function() {
    console.log("First page load...");

    //Create the observer
    let myObserver = new MutationObserver(function(mutationList, observer) {
        mutationList.forEach((mutation) => {
            switch(mutation.type) {
                case 'childList' :
                    if(mutation.addedNodes && mutation.addedNodes.length) {
                        let nodes = mutation.addedNodes;
                        for(var i=0; i < nodes.length; i++) {
                            if(nodes[i].nodeName.toLowerCase() === 'script') {
                                console.log("Script tag added");
                            }
                        }
                    }
                    break;
            }
        });
    });

    //Observe the body and head as that's where scripts might be placed
    let body = document.querySelector("body");
    let head = document.querySelector("head");

    //options to look for per-element
    //childList and subtree must be set to true
    let options = {
        childList:true,
        subtree:true
    };
    myObserver.observe(body, options);
    myObserver.observe(head, options);
});

示例

setTimeout(function() {
    let script = document.createElement("script");
    script.setAttribute("integrity", "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=");
    script.setAttribute("crossorigin", "anonymous");
    script.setAttribute("src", "http://code.jquery.com/jquery-3.3.1.min.js");
    script.onload = function() {
        console.log("Script loaded!");
    };
    document.querySelector("head").appendChild(script);
}, 1000);

Answer 2

var targetNode = document;
var observerOptions = {
  childList: true,
  attributes: true,
  subtree: true //Omit or set to false to observe only changes to the parent node.
}

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    if(mutation.type=='childList'){
      var addedNodes=mutation.addedNodes
      for(x=0;x<addedNodes.length;x++){
        if(addedNodes[x].tagName == 'script'){
          //Do what you will
        }
      }
    }
  });
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

像这样？（未试）修改自：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver

聆听添加到文档中的脚本

2 个答案: