跨浏览器的设置innerHTML办法[网站编程]

赞助商链接

分享到： QQ空间 新浪微博 腾讯微博 人人网

　　本文“跨浏览器的设置innerHTML办法[网站编程]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

　　很多人都大概碰到过这种情形:设置 innerHTML 的时刻,插入的 HTML 代码中包含脚本,但这些脚本却不见效,大概在 IE 上见效在别的浏览器上就不见效.缘由很简单:差别浏览器对插入 innerHTML 中的脚本有差别的处理办法.经过实践,归纳以下:

　　关于IE,首先 script 标签必须带 defer 属性,其次在插入时刻,innerHTML 的所属节点必须在 DOM 树中;关于 Firefox 和 Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM 树中.

　　按照上面结论,给出通用的设置 innerHTML 办法:

　　/*

　　* 描写:跨浏览器的设置 innerHTML 办法

　　* 答应插入的 HTML 代码中包含 script 和 style

　　* 作者:kenxu <ken@ajaxwing.com>

　　* 日期:2006-03-23

　　* 参数:

　　* el: 合理的 DOM 树中的节点

　　* htmlCode: 合理的 HTML 代码

　　* 经测试的浏览器:ie5+, firefox1.5+, opera8.5+

　　*/

　　var setInnerHTML = 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);

　　}

　　}

　　}

　　还有某些情形,我们事前不清楚要插入到 innerHTML 的 HTML 代码包含什么,假如包含 document.write 语句,那么就会破坏整个页面.关于这种情形,可以通太重新定义 document.write 来避免.代码以下:

　　/*

　　* 描写:通太重定义 document.write 函数,避免在利用 setInnerHTML 时,

　　* 插入的 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'));

　　setInnerHTML(el, argument)

　　}

　　}

　　}

　　在这篇文章编写之前,已经有一个对比完善的办理办法《让插入到 innerHTML 中的 script 跑起来》.对比起来,《让》给出的办法考虑得更具体,但处理起来对比烦琐,效率不高.而这里给出的办法例更简单,并且充分操纵了浏览器的特点.

　　以上是“跨浏览器的设置innerHTML办法[网站编程]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：

跨浏览器的设置innerHTML办法

教你编写跨浏览器兼容的 CSS 代码