Firefoxの要素にinnerHTMLを設定しようとしましたが、正常に動作し、IEで試してみたところ、明らかな理由もなく予期しないエラーが発生しました。
たとえば、テーブルのinnerHTMLを「hifrom stu」に設定しようとすると、テーブルの後にシーケンスが続く必要があるため、失敗します。
Firefoxの要素にinnerHTMLを設定しようとしましたが、正常に動作し、IEで試してみたところ、明らかな理由もなく予期しないエラーが発生しました。
たとえば、テーブルのinnerHTMLを「hifrom stu」に設定しようとすると、テーブルの後にシーケンスが続く必要があるため、失敗します。
innerHTML は IE のテーブル要素に対して読み取り専用であるため、この動作が見られます。MSDN のinnerHTML プロパティドキュメントから:
このプロパティは、読み取り専用である COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE、TR を除くすべてのオブジェクトに対して読み取り/書き込み可能です。
これは私がごく最近解決したものであるため、Stu の質問に対してなぜダウンモッドされているのかわかりません。その秘訣は、現在ドキュメント ツリーに関連付けられていないDOM 要素に HTML を「噴出」させることです。これを行うコードスニペットは次のとおりです。
// removing the scripts to avoid any 'Permission Denied' errors in IE
var cleaned = html.replace(/<script(.|\s)*?\/script>/g, "");
// IE is stricter on malformed HTML injecting direct into DOM. By injecting into
// an element that's not yet part of DOM it's more lenient and will clean it up.
if (jQuery.browser.msie)
{
var tempElement = document.createElement("DIV");
tempElement.innerHTML = cleaned;
cleaned = tempElement.innerHTML;
tempElement = null;
}
// now 'cleaned' is ready to use...
ここでは、ブラウザーが IE かどうかをテストするために、このスニペットで jQuery のみを使用していることに注意してください。jQuery に強い依存関係はありません。
テーブル内のリンクのリストを別のリンクのリストに置き換えるという問題と戦ってきました。上記のように、IE とそのテーブル要素の読み取り専用プロパティに問題があります。
追加はオプションではなかったので、(最終的に)これを解決しました(これはCh、FF、およびIE 8.0で機能します(まだ他のものを試していますが、期待しています))。
replaceInReadOnly(document.getElementById("links"), "<a href>........etc</a>");
function replaceInReadOnly(element, content){
var newNode = document.createElement();
newNode.innerHTML = content;
var oldNode = element.firstChild;
var output = element.replaceChild(newNode, oldNode);
}
私のために働く - 私はそれがあなたのために働くことを願っています
innerHTML を設定しようとしている要素の範囲を確認してください。FF と IE ではこれを別の方法で処理するため
「明らかに、Firefox はそれほどうるさいわけではありません」 ==> どうやら FireFox は非常にバグが多いため、基本的な html ネスト規則の明らかな違反を登録していません ...
別のフォーラムで誰かが指摘したように、FireFox は、html ドキュメント全体をフォーム フィールドまたは画像の子として追加することを受け入れます ,-(
動作を変更できます。IE で参照されていない要素のガベージ コレクションを防止するコードを次に示します。
if (/(msie|trident)/i.test(navigator.userAgent)) {
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML", {
get: function () {return innerhtml_get.call (this)},
set: function(new_html) {
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
this.removeChild (childNodes[0])
}
innerhtml_set.call (this, new_html)
}
})
}
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)
innerText および/または textContent を設定しようとしましたか? 一部のノード (SCRIPT タグなど) は、IE で innerHTML を変更しようとすると、期待どおりに動作しません。innerText と textContent の詳細については、次を参照してください。
http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/
まったく別の innerHTML を設定していたり、innerHTML のパターンを置き換えていませんか? innerHTML の「パワー」を介して簡単な検索/置換を行おうとすると、IE で再生されない要素のタイプが見つかるためです。
これは、試行を try/catch で囲み、正常に実行できるまで、parentNode を介して DOM をバブリングすることで、慎重に修正できます。
しかし、これはまったく新しいコンテンツを挿入する場合には適していません。
論理的に正しくないIEの要素にinnerHTMLを設定しようとすると、このエラーがスローされることがわかりました。たとえば、テーブルのinnerHTMLを「hifrom stu」に設定しようとすると、テーブルの後にシーケンスが続く必要があるため、失敗します。どうやらFirefoxはこれほどうるさいものではありません。それが役に立てば幸い。