南强小屋 Design By 杰米
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;
};
如果此函数还应有其他任何内容或者在正则表达式中遗漏了什么，请让我知道。
很明显，在网页上还有很多其他注入恶意代码的方法。setInnerHTML 函数仅能在所有 A-grade 浏览器上规格化 <script> 标签的执行行为。如果你准备注入不能信任的 HTML 代码，务必首先在服务器端过滤，已有许多库可以做到这点。
原文：Julien Lecomte 的 《The Problem With innerHTML》
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无innerHTML应用的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。