站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: innerHTML应用
搜索:
您的位置: 主页 > 教程 > 网页设计 > HTML > » 正文

innerHTML应用

来源: 易采站长站

blank的blog:http://www.planabc.net/
innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API(removeChild, createElement, appendChild)。但很显然,使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而,你需要知道 innerHTML 有一些自身的问题:
    当 HTML 字符串包含一个标记为 defer 的 script 标签(<script defer>…</script>)时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击。 设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险。
    还有几个其他次要的缺点,也值得一提的:
      你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用 DOM APIs)。 你不能在所有浏览器的所有 HTML 元素上设置 innerHTML 属性(比如,Internet Explorer 不允许你在表格的行元素上设置innerHTML 属性)。
      我更关注与使用 innerHTML 属性相关的安全和内存问题。很显然,这不是新问题,已经有能人围绕这些中的某些问题想出了方法。
      Douglas Crockford 写了一个 清除函数 ,该函数负责中止由于 HTML 元素注册事件处理函数引起的一些循环引用,并允许垃圾回收器(garbage collector)释放与这些 HTML 元素关联的内存。
      从 HTML 字符串中移除 script 标签并不像看上去那么容易。一个正则表达式可以达到预期效果,虽然很难知道是否覆盖了所有的可能性。这里是我的解决方案:
      /<script[^>]*>[\S\s]*?<\/script[^>]*>/ig
      现在,让我们将这两种技术结合在到一个单独的 setInnerHTML 函数中,并将 setInnerHTML 函数绑定到 YUI 的 YAHOO.util.Dom 上:
      YAHOO.util.Dom.setInnerHTML = function (el, html) {
      el = YAHOO.util.Dom.get(el);
      if (!el || typeof html !== 'string') {
      return null;
      }
      // 中止循环引用
      (function (o) {
      var a = o.attributes, i, l, n, c;
      if (a) {
      l = a.length;
      for (i = 0; i < l; i = 1) {
      n = a[i].name;
      if (typeof o[n] === 'function') {
      o[n] = null;
      }
      }
      }
      a = o.childNodes;
      if (a) {
      l = a.length;
      for (i = 0; i < l; i = 1) {
      c = o.childNodes[i];
      // 清除子节点
      arguments.callee(c);
      // 移除所有通过YUI的addListener注册到元素上所有监听程序
      YAHOO.util.Event.purgeElement(c);
      }
      }
      })(el);
      // 从HTML字符串中移除script,并设置innerHTML属性
      el.innerHTML = html.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");
      // 返回第一个子节点的引用
      return el.firstChild;
      };
Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -