检测是不是使用外部 JavaScript 文件创建了 html 元素

Posted 2023-03-21

【中文标题】检测是不是使用外部 JavaScript 文件创建了 html 元素

【英文标题】：Detect if html Element is created using external JavaScript file检测是否使用外部 JavaScript 文件创建了 html 元素

【发布时间】：2021-11-26 11:49:56

【问题描述】：

我想知道 javascript 中是否有任何方法可以检测是否从外部 JS 文件创建了任何节点（html 元素）。 例如，很多时候我们使用脚本标记使用外部 js 文件，然后该脚本在我们的页面上创建一些元素（例如聊天机器人和 ifrmae）我想检测是否有任何 html 节点是使用外部 js 文件或我们的内部或自我创建的托管的 js 文件。

【问题讨论】：

除非创建的元素具有由外部脚本添加的特定属性（或缺少添加到原始文档上所有元素的属性）。

如果某个库向 DOM 添加了一个元素，它可能有一个类。你可以检查那个类名是什么并用这个搜索它：HTML DOM getElementsByClassName() Method

@Jesper 可能有多个脚本，它们可以创建具有任何类或其他属性的元素

您可以使用Mutation Observer 执行此操作。我在下面举了一个例子。值得一提的是，在复杂的页面上，这可能是一项相当昂贵的操作。

【参考方案1】：

您可以为此使用Mutation Observer。

可以设置一个 Mutation Observer 来观察一个特定的元素，并为它的任何变化提供一个回调函数。这包括添加节点、更改属性、and more。

如果您在页面上的任何其他脚本之前运行观察者，则只要父节点存在，您就能够知道后续脚本是否已更改某些内容。

这是一个观察列表元素何时添加内容的基本示例：

let animals = document.getElementById('animals');
let add = document.getElementById('add');
options = 
    childList: true
  ,
  observer = new MutationObserver(onChanged);

function onChanged(mutations) 
  for (let mutation of mutations) 
    // specify which type of mutation you want to observe
    if (mutation.type === 'childList') 
      console.log('a list item has been added');
    
  


observer.observe(animals, options);

add.addEventListener('click', () => 
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("New item"));
  animals.appendChild(li);
);

<ul id="animals" class="list">
  <li>Dog</li>
  <li>Cat</li>
  <li>Guinea Pig</li>
  <li>Rabbit</li>
</ul>

<button id="add">Add to list</button>