• 注册
  • 关于作者
    企业认证:趣记站长
    关注 6 粉丝 4 喜欢 9 内容 992
    江西省·南昌市
    聊天 送礼
    • 查看作者
    • 跨浏览器的设置innerHTML方法

      From:http://www.ajaxwing.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&CSS

      我们事先不清楚要插入到 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

      HTML&CSS

    • 0
    • 0
    • 0
    • 69
    • 单栏布局 侧栏位置: