Question

我正在尝试制作一个javascript嵌入，它将在加载时操纵页面。该脚本位于标题中，我希望它能够在document.querySelector找到后立即操作元素。换句话说，它需要在document.readyState是“交互式”之前对DOM中的更改作出反应，然后才能“加载”。我不能使用超时/间隔，因为文档加载会阻塞，直到加载完整文档为止，因此如果我将超时设置为0ms，则在document.readyState被“加载”之前它将不会执行。

在将元素添加到DOM时是否会触发任何事件？我尝试了DOMNodeInserted，但它似乎只触发了在加载文档后异步添加的元素。

最后，这必须只用javascript完成;我无权访问html或服务器。嵌入是在其他人的网站上进行的。

Answer 1

也许你问的是错误的问题？为什么不加载你需要的任何shell或bare-bones框架的页面，然后使用类似AngularJS的东西来动态渲染你需要的东西？你不一定需要服务器这样的东西。

Answer 2

您应该将事件附加到文档本身，然后检查事件的目标，如果它是您需要的，请执行您想要的操作。例如：

document.addEventListener("click", function(e){
  var element = e.target;
  if (element.nodeName === "A") {
    //I am gonna do something with <a> elements
    //Don't forget to return true if it is an anchor and you want the default event to trigger because if not, it will cancel the event.

  } else if (element.className.match("myClass")) {
    //OK, this element contains the class i am looking for, let's do something with it
  } else if (element.id === "myId") {
    //I finally found the element with the ID i was looking for
  }
});

更新（对于节点插入）：

document.addEventListener("DOMNodeInserted", function(e){
      // e is a MutationEvent
      var element = e.target;
      //Behavior here is pretty much the same as above
      if (element.nodeName === "A") {
        //I am gonna do something with <a> elements
        //Don't forget to return true if it is an anchor and you want the default event to trigger because if not, it will cancel the event.

      } else if (element.className.match("myClass")) {
        //OK, this element contains the class i am looking for, let's do something with it
      } else if (element.id === "myId") {
        //I finally found the element with the ID i was looking for
      }
    });

另一个更新：

我发现此link可能会产生有趣的结果。它使用动画来确定对象何时插入DOM。我创建了一个带有一点POC的fiddle，它似乎可以做你想要的。

在Javascript中触发文档加载事件之前，是否可以响应添加到DOM的元素？

2 个答案: