让插入到 innerHTML 中的 script 跑起来的代码第1/2页

2024-05-06 14:18:47

字体：大中小

来源：转载

供稿：网友

在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让我们的程序得不到预期的结果。因此我们需要解决这个问题。

如果你读过 MSDN，你会发现并非所有插入到 innerHTML 中的脚本都不能执行，如果这段脚本的 script 标签中包含了 defer 属性，IE 会正确的执行这些脚本程序。但不幸的是，Moziila/Firefox 和 Opera 可不吃这一套，不管 script 标签有没有设置 defer 属性，这些浏览器都不会向 IE 那样去执行插入到 innerHTML 中的脚本。

但不管脚本是否被执行了，有一点我们可以肯定，那就是这些脚本确实被插入到了 innerHTML 中，如果不相信，你可以 alert 一下看看。但如果你真的 alert 了，你也可能会发现有一种例外情况存在，那就是如果脚本在 innerHTML 内容开头的话，那么 IE 浏览器将会忽略掉这段脚本，而 Moziila/Firefox 和 Opera 却不会。

好了，问题分析的差不多了，我们来看看如何解决吧。

解决的思路其实很简单，那就是将插入到 innerHTML 中的所有脚本取出来，然后一一执行。不过我们先要解决上面的两个问题。

先来看第一个问题，如何避免在 IE 中重复执行 innerHTML 中带有 defer 属性的脚本。这个很容易，只需要先确定浏览器是否是 IE，然后再检测将要执行的脚本是否带有 defer 属性即可。需要注意的是，在判断 IE 浏览器时，我们需要避免被 opera 的浏览器识别欺骗。这一点我们在后面的代码中将会看到它是如何做的。

接下来，看 IE 忽略 innerHTML 开头脚本的问题，这个也很容易解决。只需要在要插入到 innerHTML 中的内容的开头附加一段不是脚本的内容，就可以了。但不要试图附加一个空内容的标签，或者空格、回车、换行等，这将不起作用，开头的脚本仍然会被忽略。也不要试图附加，虽然这可以让开头的脚本不再被忽略，但这个仍然会影响原有内容的显示，虽然你可能觉得不明显，但是对于挑剔的用户来说，这可能是无法容忍的。因此，为了让附加的内容既可以起到避免开头脚本被忽略的功能，又不会造成不良影响，我们将附加这么一段内容：

上一篇：兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

下一篇：javascript 如何生成不重复的随机数