innerHTML應用程式_HTML/Xhtml_網頁製作

blank的blog：http://www.planabc.net/
innerHTML 屬性的使用非常流行，因為他提供了簡單的方法完全取代一個 HTML 元素的內容。另一個方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很顯然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而，你需要知道 innerHTML 有一些自身的問題：

當 HTML 字串包含一個標記為 defer 的 script 標籤（

）時，如 innerHTML 屬性處理不當，在 Internet Explorer 上會造成腳本注入攻擊。 設定 innerHTML 將會破壞現有的已註冊了事件處理函數的 HTML 元素，會在某些瀏覽器上造成記憶體外洩的潛在危險。

還有幾個其他次要的缺點，也值得一提的：

你不能得到剛剛建立的元素的引用，需要你手動添加程式碼才能取得那些引用（使用 DOM APIs）。 你不能在所有瀏覽器的所有 HTML 元素上設定 innerHTML 屬性（例如，Internet Explorer 不允許你在表格的行元素上設定innerHTML 屬性）。

我更專注於與使用 innerHTML 屬性相關的安全性和記憶體問題。很顯然，這不是新問題，已經有能人圍繞這些中的某些問題想出了方法。
Douglas Crockford 寫了一個 清除函數 ，該函數負責中止由於 HTML 元素註冊事件處理函數引起的一些循環引用，並允許垃圾回收器（garbage collector）釋放與這些 HTML 元素關聯的記憶體。
從 HTML 字串中移除 script 標籤並不像看起來那麼容易。一個正規表示式可以達到預期效果，雖然很難知道是否涵蓋了所有的可能性。這裡是我的解決方案： <script>/</script>[^>]*>[Ss]*?]*>/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 n = a[i].name;
if (typeof o[n] === 'function') {
o[n] = null;
}
}
}
a = o.childNodes;
if (a) {
l = a.length; for (i = 0; i c = o.childNodes[i];
// 清除子節點
arguments.callee(c);
// 移除所有透過YUI的addListener註冊到元素上所有監聽程式
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// 從HTML字串中移除script，並設定innerHTML屬性<script> el.innerHTML = html.replace(/</script>[^>]*>[Ss]*?
]*>/ig, "");
// 傳回第一個子節點的參考
return el.firstChild;
};
如果此函數還應有其他任何內容或在正規表示式中遺漏了什麼，請讓我知道。 <script>很明顯，網頁上還有很多其他注入惡意程式碼的方法。 setInnerHTML 函數只能在所有 A-grade 瀏覽器上規格化 <br /> 標籤的執行行為。如果你準備注入不能信任的 HTML 程式碼，務必先在伺服器端過濾，已有許多函式庫可以做到這一點。 <script defer>&hellip;</script>原文：Julien Lecomte 的 《The Problem With innerHTML》