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

Question

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

Answer 1

你可以使用一个突变观察者。

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

如果你在页面上的任何其他脚本之前运行你的observer，你将能够知道后续脚本是否更改了某些内容，只要父节点存在。

这是一个基本的例子，用于观察列表元素添加了什么内容:

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>