热点网|医学教育网|北京pk10开奖直播 pk10开奖直播 北京赛车pk10 pk10开奖直播 北京赛车pk10 PK10开奖直播 北京赛车pk10开奖直播 北京pk10 北京pk10
网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

跨浏览器的设置innerHTML方法

【 网络作者:kenxu 更新时间:2008-01-23 | 字体:
[导读]From:http://www.chinawobo.com/index.php?c=DOMAuthor:kenxu很多人都可能遇到过这种情况:设置 innerHTML 的时候>,插入的 HTML 代码中包含脚本>>,但这些脚本却不生效>,或者在 IE 上生效在其它浏览器上就不生效。原因很...

From:http://www.chinawobo.com/index.php?c=DOM
Author:kenxu

很多人都可能遇到过这种情况:设置 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 跑起来》>。比较起来>,《让》给出的方法考虑得更细致,但处理起来比较繁琐>,效率不高。而这里给出的方法则更简单,并且充分利用了浏览器的特性。
友荐云推荐
  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载>>,但请务必注明出处和原始作者>。文章版权归文章原始作者所有>。对于被本站转载文章的个人和网站>,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正>。
RSS订阅
  • QQ邮箱
  • 填写您的邮件地址,订阅我们的精彩内容:
更多
© 2014 网站运营 - T086.com(原itlearner.com)
  • 河南职业技术学院全国技能(导游类)大赛获佳绩 2018-05-24
  • Футбол -- Арены ЧМ-2018 -- Стадион Нижний Новгород 2018-05-24
  • 美媒:美国对华战略缺乏头脑 2018-05-23
  • 中国钢企布局沿海 柳钢瞄准东盟经济圈 2018-05-23
  • 2018的偶像元年是否只是一场美丽的谎言?偶像练习生创造101选秀 2018-05-22
  • 上海临港有个“儿童大学” 2018-05-20
  • 2017年世界大学学术排名发布 清华进前50大学学术排名大学排行榜 2018-05-20
  • 日本战犯侵华罪行自供 2018-05-19
  • 塑料污染让人痛心 世界最深海沟竟成“垃圾场” 2018-05-19
  • 男子因琐事杀害女友并分尸抛河 警方根据美甲破案嘉兴美甲死者 2018-05-18
  • 166名中国人在泰国操控中国股市被警方押扣审讯 2018-05-17
  • 消防车进商场——“小小消防员”的消防安全乐体验 2018-05-17
  • 学者:“感应舍利”的出现为何是“必然” 2018-05-16
  • 中国等国利用可再生能源创造上千万工作岗位 2018-05-16
  • 只有用在外语环境下学习的人才懂的13个瞬间! 2018-05-16
  • 微商货源 | 冠珠陶瓷 | 6688电视家官网 | 中康体检网 | 安徽极热网 | 北京赛车开奖号码 | 快猴网 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 | 冠珠陶瓷 | 广东旅游景点大全 |
    RunTime:8.21ms QueryTime:7