Question

我正在尝试复制包含＆lt; script＆gt; 的＆lt; div＆gt; 元素。问题是，当我将它附加到DOM中时，包含的脚本不会被执行。

＆＃xA;＆＃xA;

我该如何解决？

＆＃xA;

Answer 1

这里描述了它不能工作的原因：Why don't cloneNode tags execute?。

您可以通过搜索所有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 demo

Answer 2

通常，您添加到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');
}

当然这是一个非常简单的例子，你可能需要传递一些变量或对函数的引用，但你应该得到要点。

添加包含<script>的dom元素

2 个答案: