我可以动态地将javascript添加到现有脚本元素中吗？

Question

我想动态地将javascript添加到现有的脚本元素,例如:

var se = document.createElement('script');
se.setAttribute('type', 'text/javascript');
se.innerHTML = 'alert(1)';
document.getElementsByTagName('head').item(0).appendChild(se);

有趣的部分是se.innerHTML = 'alert(1)';,如果它是有效的？如果不是,我怎么能以正确的方式做到这一点？

Answer 1

所有浏览器当前都支持javascript 文本属性,并在将新脚本元素(没有src属性)添加到文档时评估文本.

innerHTML或将子节点添加到脚本元素不会评估所有浏览器中的脚本.

function addCode(code){
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);
}

//测试用例

var s= 'document.body.ondblclick=function(e){\n'+
'e=window.event? event.srcElement:e.target;\n'+
'alert(e.id || e.tagName);\n'+
'}\nalert("ready to double click!");';

addCode(s);

Answer 2

这不是在现有脚本元素中添加JavaScript,而是创建一个新的脚本元素并将其添加到文档中.

这在现代浏览器中确实有效,但除非你在一个变量中有一些真正需要在全局上下文中执行的代码(因此无法使用new Function()或eval从函数内部执行),否则通常不会这样做.

用例是什么？你真的必须这样做吗？

如果您尝试通过写入<script>文档中已有的文本内容来更改脚本的内容,则不会导致新脚本内容运行,它只会更改DOM的内容.<script>操作元素时导致新脚本运行的原因的确切情况因浏览器而异(尽管HTML5正试图将其标准化); 现在,除了简单地创建和附加新脚本之外,最好避免做任何其他事情.(<script>如果可能的话,甚至可以更好地避免编写脚本.)

设置innerHTML将起作用; RoToRa的方法createTextNode虽然更好.对于<script>旧式HTML文档,innerHTML实际上会做同样的事情createTextNode,因为它<script>是一个不能包含标记的CDATA元素.这对于XHTML-served-as-XML来说很重要,而且一般来说,innerHTML当你只想设置纯文本时,它可以更加清晰,避免出现问题.

此外,您可以使用[0]而不是item(0)(这被定义为JavaScript DOM绑定的一部分),您通常应该避免使用getAttribute/ setAttribute; se.type=...相反,使用DOM HTML属性,它们在IE中更具可读性和错误(尽管IE错误不会影响您的type属性).