如何将 <script> 元素添加到 DOM 并执行其代码？答案

【问题标题】：How to add a <script> element to the DOM and execute its code?如何将 <script> 元素添加到 DOM 并执行其代码？
【发布时间】：2011-09-19 22:50:26
【问题描述】：

我想在现有 DOM 中添加一个元素以运行 javascript 代码。

我是用 YUI 做的：

var scriptNode = Y.Node.create('<script type="text/javascript" charset="utf-8">alert("Hello world!");<\/script>');
var headNode = Y.one('head');
headNode.append(scriptNode);

它已成功添加到 DOM，但它没有给我警报。

有人知道问题出在哪里吗？

【问题讨论】：

有什么理由不直接运行JS？
scriptNode 中的 Javascript 是否在您的控制之下？将其包装在一个函数中并在附加后调用它？刚刚发现这个 - 似乎合适且内容丰富：stackoverflow.com/questions/610995/…
你的结束标签多了一个'\'，应该是，不知道有没有影响
SharpPer - 反斜杠引用下面的正斜杠，这样字符串中的</ 就不会被误认为是封闭脚本元素的结束标记。在字符串文字中关闭标签被认为是一种很好的做法。

标签： javascript html

【解决方案1】：

我在 JQuery 源代码中找到了这个函数，它似乎可以做你想做的事情，并且感觉比我的其他方法更干净。但话又说回来，我是 JS 初学者，可能看不到细节。无论如何，有人可能会从中拿走一些有用的东西。

function DOMEval( code, doc ) {
    doc = doc || document;

    var script = doc.createElement( "script" );

    script.text = code;
    doc.head.appendChild( script ).parentNode.removeChild( script );
}

【讨论】：

removeChild 调用是什么？那不会删除您刚刚添加的脚本吗？有没有我错过的技巧？
@Danger 将代码附加到脚本标签中，立即执行，然后删除脚本标签进行清理。该函数称为DOMEval，而不是addScript等。
使用createTextNode 将代码附加为字符串。您通过text 属性添加代码的解决方案对我来说很好。

【解决方案2】：

我不知道 YUI 的 Node.create() 函数是如何工作的，所以对此不予置评。但是一个简单的跨浏览器脚本是：

  window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = 'alert("hello world!");';
    try {
      s.appendChild(document.createTextNode(code));
      document.body.appendChild(s);
    } catch (e) {
      s.text = code;
      document.body.appendChild(s);
    }
  }

try..catch 块是必要的，因为大多数浏览器都喜欢第一种方法，但有些不喜欢并抛出错误。第二种方法涵盖了这些。您也可以简单地 eval 代码，这或多或少是等效的，并且是某些库所做的。

【讨论】：

你不能把 document.body.appendChild(s) 放在 finally 子句下吗？
是的，这很好，因为错误是由将文本节点附加到脚本元素引起的。
如果catch块代码满足更多的浏览器，那为什么不直接使用呢？
请注意，如果您评估代码而不是添加脚本元素，document.currentScript 将无法正确设置。如果你正在制作一个工具供其他人使用，他们的脚本代码可能依赖于document.currentScript
那你为什么不能只使用第二种方法呢？有些浏览器不支持第二种方法？