Question

我有一个DOM对象，由AJAX插入到现有的HTML文档中。我想在插入的对象中嵌入一个内联脚本，以便在它成为HTML文档的一部分后立即执行。以下是我的尝试，它将由AJAX插入到现有的HTML文档中，但它不起作用。什么是正确的方法？

<div onload='alert(self.offsetWidth);'>Foo</div>

Answer 1

div元素没有onload事件，这就是您当前技术不起作用的原因。

在动态加载的代码中执行脚本的其他库（如jQuery）做的是加载HTML，将其插入到文档中，然后找到嵌入其中的脚本标记，然后动态重新插入这些脚本标记进入文档，导致它们被加载和评估。

这是一个简短的例子：

// dynamically inserted content example
var html = "<script>console.log('hello');<" + "/script" + "><div>Hi</div>";

// insert content    
var obj = document.getElementById("test")
obj.innerHTML = html;

// now make a copy of the script tag and re-insert it into the document 
// to get it processed
var head = document.getElementsByTagName("head")[0];
var scripts = obj.getElementsByTagName("script");
var s;
for (var i = 0; i < scripts.length; i++) {
    s = scripts[i];
    s.parentNode.removeChild(s);
    var newScript = document.createElement("script");
    newScript.innerHTML = s.innerHTML;
    head.appendChild(newScript);
}

工作演示：http://jsfiddle.net/jfriend00/BcL34/

如果现在你真正需要的是你的ajax代码加载了新内容，那么你可以在完成插入内容后从你的ajax代码中调用一个回调函数，然后回调函数可以执行你的动作

Answer 2

如果您确实需要在节点插入时执行某些操作，MutationObserver是可行的方法（对于较旧的浏览器，使用slooow和deprecated MutationEvent）。它通常是一种矫枉过正，影响你的应用程序的性能（一些人认为突变事件 ruin 性能），这使得DOM突变看起来不是最好的想法（如果可以的话，不要错过更好的选择，比如包括你的代码上面提到的XHR onload）。

dj由ajax加载后执行脚本

2 个答案: