innerHTML动态添加html代码和脚本兼容多个浏览器

症状：给某个元素的 innerHTML 设置值时，如果提供的 HTML 代码中包含js脚本，很多时候这些脚本无效，或者在某种浏览器上有效，但在其它浏览器上无效。

原因：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：

对于IE，首先, script 标签必须带 defer 属性，其次,在插入时刻，innerHTML 的所属节点必须在 DOM 树中.

对于 Firefox 和Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。

根据上面结论，给出通用的设置 innerHTML 方法:

代码如下:

/*
* 描述：跨浏览器的设置 innerHTML 方法
* 允许插入的 HTML 代码中包含 script 和 style
* 参数：
* el: DOM 树中的节点，设置它的 innerHTML
* htmlCode: 插入的 HTML 代码
* 经测试的浏览器：ie5+, firefox1.5+, opera8.5+
*/
var set_innerHTML = function (el, htmlCode)
{var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
{htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
htmlCode = htmlCode.replace(/<script([^>]*)>/gi,'<script$1 defer="true">');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
}
else
{var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if (el_next)
el_parent.insertBefore(el, el_next)
else
el_parent.appendChild(el);
}
}

上面的代码还有一个问题：如果插入的 HTML 代码中包含 document.write 语句，那么就会破坏整个页面。对于这种情况，可以通过重新定义 document.write 来避免。代码如下：

代码如下:

/*
描述：重定义 document.write 函数.
避免在使用 set_innerHTML 时，插入的 HTML 代码中包含 document.write 语句，导致原页面受到破坏。
*/
document.write = function(){
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i < arguments.length; i++) {
argument = arguments[i];
if (typeof argument == 'string') {
var el = body.appendChild(document.createElement('div'));
set_innerHTML(el, argument)
}
}
}

赞 (0)

相关推荐

  • js使用for循环与innerHTML获取选中tr下td值

    function getParentEl (el, tagName) { if (!el) return el; do { el = el.parentNode; } while(el && el.tagName !== tagName); return el; } function temp(){ //得到选中row的value值 var temp=document.getElementsByName('id'); for(var i=0;i<temp.length;i++){ i

  • innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了. te

  • innerHTML中标签可以换行的方法汇总

    在用innerHTML生成结构时,为了看起来结构明快,可以在每行的末尾加一个反斜线\,即可保持html原结构,而不至于将标签都挤在一块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML中标签可以换行的方法</title> </head> <body> <sc

  • 放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模版,最终通过一定的方法输出给用户(innerHTML.documentWrite等方式). 缺点 1)拼接字符串的过程容易出错,常常忘了'/">等匹配的符号. 2)修改前台模版的同时容易遗忘同步更改动态生成的模版. 3)拼接字符串不直观和美观,不利于查找错误,例如:数据中如果存在HTML内容,

  • innerHTML与jquery里的html()区别介绍

    看个示例: 复制代码 代码如下: var tbody=document.createElement('tbody'); tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只读的</td></tr>'; //在IE下报错,目标对象错误 现在用jquery的html试试, 复制代码 代码如下: $(tbody).html('<tr><td>IE下tbody的innerHTML是只读的</td&g

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

  • IE6-IE9不支持table.innerHTML的解决方法分享

    测试代码: 复制代码 代码如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代码在IE6-9中无效,直接报错: IE

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • 调用innerHTML之后onclick失效问题的解决方法

    最近再写一个项目,用到了innerHTML,但是呢,发现调用innerHTML之后,onclick失效了,这也是在意料之中的,因为innerHTML是以文本形式插入的button,所以无法识别onclick事件,所我们只有另找出路了,我们不能直接实现,但是可以间接实现,下面就举个例子: 例子一:该例子是无法实现的onclick的 复制代码 代码如下: <html> <head> <script defer> function insCell(th) var name=t

随机推荐