首页 » DOM » 通过innerHTML插入script元素

通过innerHTML插入script元素

在多数的浏览器中,通过innerHTML插入的<script>元素不会被执行。IE是唯一支持这种操作的浏览器,但条件是必须指定defer特性,并且在<script>元素前面添加未然所谓的作用域内元素。这是因为<script>是作用域外元素,包含着在页面中看不到该元素的意思,就像看不到<style>元素或注释一样。在通过innerHTML插入的字符串中,如果一开始就是作用域外元素,IE会把所有作用域外元素都剥离掉,也就是说下面的这行代码将无法执行:

div.innerHTML = "<script defer>alert('hi');</scr" + "ipt>";    //不能执行

在这里,通过innerHTML插入的字符串以一个作用域外元素开头,因此整个字符串会变成空字符串。为了确保脚本能够执行,必须潜质一个作用域内元素,例如一个文本节点,或者像<input>这样的一个没有结束标签的元素。例如,下面这几行代码都可以正常执行:

div.innerHTML = "_<script defer>alert('hi');</scr" + "ipt>";
div.innerHTML = "<div>&nbsp;</div><script defer>alert('hi');</scr" + "ipt>";
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');</scr" + "ipt>";

这一行代码会导致在<script>元素前插入一个文本节点。事后,为了不影响页面显示,可能需要移除这个文本节点。第二行代码采用的方法类似,只不过使用的是一个包含非换行空格的<div>元素。如果仅仅插入一个空的<div>元素,还是不行;必须要包含一点内容,浏览器才会创建文本节点。同样,为了不影响页面布局可能需要移除这个节点。第三行代码使用的是一个隐藏的<input>字段不影响页面布局,因此这种方式在大多数情况下都是首选。

此文章发表在 DOM. 将 固定链接 加入收藏.