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 text 属性，并在将新脚本元素（没有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()或{来自函数内部的{1}}。

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

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

设置<script>将有效;使用innerHTML的RoToRa方法更好。对于旧版HTML文档中的createTextNode，<script>实际上会与innerHTML执行相同的操作，因为createTextNode是一个不能包含标记的CDATA元素。这对于XHTML-served-as-XML来说很重要，一般来说，当你只想设置纯文本时，避免<script>及其逃避问题会更加清晰。

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

Answer 3

如果文本包含任何可以解释为HTML的内容，例如innerHTML，则使用<将会中断。附加一个（或多个）文本节点会更好：

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

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

3 个答案: