標(biāo)準(zhǔn)參考無。 問題描述Firefox 不支持 DOM 對(duì)象的 insertAdjacentHTML insertAdjacentText 方法。 造成的影響使用這兩個(gè)方法將在 Firefox 瀏覽器內(nèi)報(bào)錯(cuò)。 受影響的瀏覽器
問題分析insertAdjacentHTML 方法insertAdjacentHTML 方法是比 innerHTML、outerHTML 屬性更靈活的插入 HTML 代碼的方法。它可以實(shí)現(xiàn)在一個(gè) DOM 元素的前面、后面、第一個(gè)子元素前面、最后一個(gè)子元素后面四個(gè)位置，插入指定的 HTML 代碼。不是 W3C 標(biāo)準(zhǔn)的 DOM 方法。 這個(gè)方法最初是由 IE4.0 以上版本實(shí)現(xiàn)，為私有特性。詳細(xì)內(nèi)容請(qǐng)參見 MSDN 說明：insertAdjacentHTML Method。 W3C 近期在 HTML5 草案中擴(kuò)展了這個(gè)方法，更多詳細(xì)的信息，請(qǐng)參見 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>
測(cè)試用例中，頁(yè)面加載的時(shí)候，會(huì)執(zhí)行 one 的 insertAdjacentHTML方法。 如果執(zhí)行期間有JS錯(cuò)誤，錯(cuò)誤信息會(huì)在 info 中輸出。 如果執(zhí)行成功，one 元素內(nèi)容的最后會(huì)被加上一個(gè)有黃色背景的文本“hi”。 在各瀏覽器下的截圖：
可見，只有 Firefox 下不支持 insertAdjacentHTML 方法。
insertAdjacentText 方法insertAdjacentText 是比 innerText、outerText 屬性更靈活的插入文本的方法。它可以實(shí)現(xiàn)在一個(gè) DOM 元素的前面、后面、第一個(gè)子元素前面、最后一個(gè)子元素后面四個(gè)位置，插入指定的文本。不是 W3C 標(biāo)準(zhǔn)的 DOM 方法。 這個(gè)方法是 IE 私有特性。詳細(xì)內(nèi)容請(qǐng)參見 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 元素內(nèi)容的最后會(huì)被加上文本 “<span style='background:yellow;'>hi</span>”。 在各瀏覽器下的截圖：
可見，只有 Firefox 下不支持 insertAdjacentText 方法。 解決方案在 Firefox 中，可通過擴(kuò)展 HTMLElement 的原型 (prototype) 來實(shí)現(xiàn)這兩個(gè)方法： 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);
}
}
參見知識(shí)庫(kù)相關(guān)問題測(cè)試環(huán)境
|
|
|
