我正在尝试复制一个包含<script>
的<div>
元素。问题是,当我将其附加到 DOM 中时,包含的脚本未执行。
我该如何解决?
它不起作用的原因在这里描述:为什么克隆节点标签不执行?。
您可以通过搜索所有script
标签并用新标签替换它们来解决这个问题,这样它将在插入时执行。
function cloneAndRenewScripts(element) {
var dupNode = element.cloneNode(true);
var scripts = dupNode.getElementsByTagName('script');
for( var i=0; i<scripts.length ; i++ ) {
var tmp = document.createElement('script');
tmp.textContent = scripts[i].textContent;
scripts[i].parentNode.replaceChild(tmp, scripts[i]);
}
return dupNode;
}
这里有一个jsfiddle演示
通常,您添加到 DOM 中的任何内容都将作为 DOM 文本插入,并且脚本不会被执行。他们需要接受评估。
像jquery和mootools这样的框架会自动为你做到这一点。如果你使用普通的js,你需要自己做。例如:
var arr = duplicatedDiv.getElementsByTagName('script');
for (var n = 0; n < arr.length; n++)
eval(arr[n].innerHTML) //evaluate the contents of this script tag
然而,这不是万无一失的,几乎不是要走的路。除非你确定没有其他方法,否则你永远不应该使用eval()
。您尚未提供克隆div 后需要执行的脚本,但可能的答案之一是将所需的代码移动到克隆后调用的单独函数中。
例如,如果你的 html 是这样的:
<div id="orig">
<p>some content</p>
<script>alert('hi');</script>
</div>
你的JavaScript是这样的:
function cloneDiv(id) {
var orig = document.getElementById(id),
clone = orig.cloneNode(true);
document.body.appendChild(clone);
}
您可以将其更改为:.HTML:
<div id="orig">
<p>some content</p>
</div>
和 js:
function cloneDiv(id) {
var orig = document.getElementById(id),
var clone = orig.cloneNode(true);
document.body.appendChild(clone);
afterClone();
}
function afterClone(){
alert('hi');
}
当然,这是一个非常简单的例子,您可能需要向函数传递一些变量或引用,但您应该了解要点。