innerHTML は、複数のブラウザーと互換性のある HTML コードとスクリプトを動的に追加します_JavaScript スキル

症状: 要素の innerHTML の値を設定するときに、提供された HTML コードに js スクリプトが含まれている場合、多くの場合、これらのスクリプトは無効であるか、一部のブラウザーでは有効でも他のブラウザーでは有効ではありません。

原因: ブラウザーが異なれば、innerHTML に挿入されたスクリプトを処理する方法も異なります。練習後、次のように要約できます:

IE の場合、まず script タグに defer 属性が必要です。次に、挿入時に innerHTML が属するノードが DOM ツリー内に存在する必要があります。

Firefox および Opera の場合、innerHTML が属するノードは、挿入時に DOM ツリー内に存在することはできません。

上記の結論に基づいて、一般的な設定の innerHTML メソッドは次のようになります。

コードをコピー コードは次のとおりです:

/*
* 説明: クロスブラウザ設定 innerHTML メソッド
* スクリプトとスタイルを含む HTML コードの挿入を許可します
* パラメータ:
* el: DOM ツリー内のノード、その innerHTML
を設定します * htmlCode: 挿入された HTML コード
*テスト済みのブラウザ: ie5、firefox1.5、opera8.5
*/
var set_innerHTML = 関数 (el, htmlCode)
{var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') {htmlCode = '

IE

' htmlCode;
htmlCode = htmlCode.replace(/<script>]*)>/gi,'<script$1 defer="true">');<br /> el.innerHTML = htmlCode;<br /> el.removeChild(el.firstChild);<br /> }<br /> それ以外<br /> {var el_next = el.nextSibling;<br /> var el_parent = el.parentNode;<br /> el_parent.removeChild(el);<br /> el.innerHTML = htmlCode;<br /> if (el_next)<br /> el_parent.insertBefore(el, el_next)<br /> それ以外<br /> el_parent.appendChild(el);<br /> }<br /> }<br /> </script>

上記のコードには別の問題があります。挿入された HTML コードに document.write ステートメントが含まれている場合、ページ全体が破壊されてしまいます。この状況は、document.write を再定義することで回避できます。コードは次のとおりです:

コードをコピー コードは次のとおりです:

/*
説明: document.write 関数を再定義します。
set_innerHTML を使用する場合は、挿入された HTML コードに document.write ステートメントが含まれるため、元のページが破損する可能性があるため避けてください。
*/
document.write = function(){
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i 引数 = 引数[i];
if (引数の型 == '文字列') {
var el = body.appendChild(document.createElement('div'));
set_innerHTML(el, 引数)
}
}
}