標準參考

無。

問題描述

Firefox 不支持 DOM 對象的 insertAdjacentHTML insertAdjacentText 方法。

造成的影響

使用這兩個方法將在 Firefox 瀏覽器內報錯。

受影響的瀏覽器

問題分析

insertAdjacentHTML 方法

insertAdjacentHTML 方法是比 innerHTML、outerHTML 屬性更靈活的插入 HTML 代碼的方法。它可以實現(xiàn)在一個 DOM 元素的前面、后面、第一個子元素前面、最后一個子元素后面四個位置，插入指定的 HTML 代碼。不是 W3C 標準的 DOM 方法。

這個方法最初是由 IE4.0 以上版本實現(xiàn)，為私有特性。詳細內容請參見 MSDN 說明：insertAdjacentHTML Method。

W3C 近期在 HTML5 草案中擴展了這個方法，更多詳細的信息，請參見 W3C HTML5 草案：3.5.7 insertAdjacentHTML()。

目前，主瀏覽器中，只有 Firefox 不支持 insertAdjacentHTML 方法。

<script type="text/javascript">
window.onload = function() {
var ps = document.getElementById("one");
try {
ps.insertAdjacentHTML("beforeend", "<span style='background:yellow;'>hi</span>");
} catch(err) {
document.getElementById("info").innerHTML = err;
}
}
</script>
<p id="one" style="background:silver; width:300px;">
this is
<i style="width:100px; background-color:gold;">another</i>
text
</p>
<div id="info"></div>

測試用例中，頁面加載的時候，會執(zhí)行 one 的 insertAdjacentHTML方法。

如果執(zhí)行期間有JS錯誤，錯誤信息會在 info 中輸出。

如果執(zhí)行成功，one 元素內容的最后會被加上一個有黃色背景的文本“hi”。

在各瀏覽器下的截圖：

Firefox	IE6 IE7 IE8 Chrome Safari Opera

可見，只有 Firefox 下不支持 insertAdjacentHTML 方法。

insertAdjacentText 方法

insertAdjacentText 是比 innerText、outerText 屬性更靈活的插入文本的方法。它可以實現(xiàn)在一個 DOM 元素的前面、后面、第一個子元素前面、最后一個子元素后面四個位置，插入指定的文本。不是 W3C 標準的 DOM 方法。

這個方法是 IE 私有特性。詳細內容請參見 MSDN 說明：insertAdjacentText Method。

至今為止 W3C 的 HTML5 草案還未涉及此方法。

目前，主瀏覽器中，只有 Firefox 不支持 insertAdjacentText 方法。

<script type="text/javascript">
window.onload = function() {
var ps = document.getElementById("one");
try {
ps.insertAdjacentText("beforeend", "<span style='background:yellow;'>hi</span>");
} catch(err) {
document.getElementById("info").innerHTML = err;
}
}
</script>
<p id="one" style="background:silver; width:300px;">
this is
<i style="width:100px; background-color:gold;">another</i>
text
</p>
<div id="info"></div>

• 測試用例中，頁面加載的時候，會執(zhí)行 one 的 insertAdjacentText 方法。
• 如果執(zhí)行期間有 JS 錯誤，錯誤信息會在 info 中輸出。

如果執(zhí)行成功，one 元素內容的最后會被加上文本 “<span style='background:yellow;'>hi</span>”。

在各瀏覽器下的截圖：

Firefox	IE6 IE7 IE8 Chrome Safari Opera

可見，只有 Firefox 下不支持 insertAdjacentText 方法。

解決方案

在 Firefox 中，可通過擴展 HTMLElement 的原型 (prototype) 來實現(xiàn)這兩個方法：

if (typeof(HTMLElement) != "undefined") {
HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
switch (where) {
case "beforeBegin":
this.parentNode.insertBefore(parsedNode, this);
break;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
break;
case "beforeEnd":
this.appendChild(parsedNode);
break;
case "afterEnd":
if (this.nextSibling)
this.parentNode.insertBefore(parsedNode, this.nextSibling);
else
this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where, parsedHTML);
}
HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
var parsedText = document.createTextNode(txtStr);
this.insertAdjacentElement(where, parsedText);
}
}

參見

知識庫

• ...

相關問題

• ...