我可以动态地将JavaScript添加到现有的脚本元素中 [英] Can I add javascript dynamically to an existing script element

问题描述

我想动态地将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）'; ，如果它是有效的？如果不是我该如何做到正确的方法？

解决方案

这不是将JavaScript添加到现有的脚本元素，它正在创建一个新的脚本元素并将其添加到文档中。 p>

这可以在现代浏览器中工作，但是你通常不会这样做，除非你在一个变量中有一些你真正需要在全局环境中执行的代码（所以你可以'在函数内部使用 new Function（）或 eval 。

有什么用例？您是否真的要这样做？

如果您尝试通过写入<$ c的文本内容来更改脚本的内容$ c>< script> 已经在文档中，它不会导致新的脚本内容运行，它只会更改DOM的内容。当< script> 元素被操纵时，导致新脚本运行的确切情况因浏览器而异（尽管HTML5是尝试将其标准化）;现在最好避免做任何事情，而不是简单地创建和附加一个新的脚本。 （甚至更好地避免脚本< script> ，如果可能的话）。

设置 innerHTML 将工作;使用 createTextNode 的RoToRa方法更好。对于旧版HTML文档中的< script> ， innerHTML 实际上将执行与 createTextNode ，因为< script> 是不能包含标记的CDATA元素。尽管XHTML服务为XML也是至关重要的，一般来说，当您只想设置纯文本时，避免 innerHTML 及其转义问题更为清晰。另外，您可以使用 [0] 而不是 item（0）（这被定义为JavaScript DOM绑定的一部分），你一般应该避免 getAttribute / setAttribute ;使用DOM HTML属性，如 se.type = ... ，这是更可读和更少的IE（尽管IE错误不会影响你的 type attribute）。

I want to dynamically add javascript to an existing script element something like:

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

The interesting part is se.innerHTML = 'alert(1)'; and if it is valid? If not how can I do this the right way?

解决方案

That's not adding JavaScript to an existing script element, it's creating a new script element and adding it to the document.

This does work in modern browsers, but you wouldn't normally do it unless you had some code in a variable that you really needed to execute in global context (so you couldn't use new Function(), or eval from inside a function).

What's the use case? Do you really have to do this?

If you did try to change the script's content by writing to the text content of a <script> that was already in the document, it would not cause the new script content to be run, it would just change the contents of the DOM. The exact circumstances of what causes new script to be run when a <script> element is manipulated vary from browser to browser (though HTML5 is trying to standardise it); for now it is better to avoid doing anything other than simply creating and appending a new script. (And even better to avoid scripting <script> at all, if possible.)

Setting innerHTML will work; RoToRa's method with createTextNode is better though. For <script> in an old-school-HTML document, innerHTML will actually do the same thing as createTextNode, since <script> is a CDATA element which cannot contain markup. It would matter for XHTML-served-as-XML though, and in general it is cleaner to avoid innerHTML and its escaping problems when you just want to set plain text.

Also, you can use [0] instead of item(0) (this is defined as part of the JavaScript DOM bindings), and you should in general avoid getAttribute/setAttribute; use the DOM HTML properties like se.type=... instead, which are more readable and less buggy in IE (though the IE bugs wouldn't affect you for the type attribute).

这篇关于我可以动态地将JavaScript添加到现有的脚本元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！