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

ajs*_*sie 18 html javascript

我想在现有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);
Run Code Online (Sandbox Code Playgroud)

它已成功添加到DOM但它不会给我提醒.

有人知道问题是什么吗?

Rob*_*obG 53

我不知道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);
    }
  }
Run Code Online (Sandbox Code Playgroud)

在try..catch块是必要的,因为大多数浏览器,如第一种方法,但有些却没有,并抛出一个错误.第二种方法包括那些.您还可以简单地评估代码,这或多或少等同于某些库所做的事情.

  • 你不能把document.body.appendChild放在finally子句下吗? (3认同)
  • 如果 catch 块代码可以满足更多浏览器的需求,那么为什么不简单地使用它呢? (2认同)

Fli*_*lip 8

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

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

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

    script.text = code;
    doc.head.appendChild( script ).parentNode.removeChild( script );
}
Run Code Online (Sandbox Code Playgroud)