症状:要素のinnerhtmlの値を設定する場合、提供されたHTMLコードにJSスクリプトが含まれている場合、これらのスクリプトが無効であるか、一部のブラウザでは有効ですが、他のブラウザでは有効です。
原因:さまざまなブラウザには、innerhtmlにスクリプトを挿入するさまざまな方法があります。練習後、次のように要約されています。
IEの場合、最初に、スクリプトタグには延期属性が必要であり、次に挿入の瞬間に、innerHTMLがDOMツリー内にある必要があるノードが必要です。
FirefoxとOperaの場合、挿入時にinnerhtmlがDOMツリーに入ることが許可されていないノード。
上記の結論によれば、innerhtmlを設定するための一般的な方法が示されています。
コードコピーは次のとおりです。
/*
*説明:Cross-BrowserセットアップInnerHTMLメソッド
* HTMLコードの挿入を許可して、スクリプトとスタイルを含める
*パラメーター:
* EL:DOMツリーのノード、そのintentmlを設定します
* HTMLCode:HTMLコードを挿入しました
*テスト済みブラウザ:IE5+、Firefox1.5+、Opera8.5+
*/
var set_innerhtml = function(el、htmlcode)
{var ua = navigator.useragent.tolowercase();
if(ua.indexof( 'msie')> = 0 && ua.indexof( 'opera')<0)
{htmlcode = '<div style = "display:none"> ie </div>' + htmlcode;
htmlcode = htmlcode.replace(/<script([^>]*)>/gi、 '<script $ 1 defer = "true">');
el.innerhtml = htmlcode;
el.RemoveChild(El.Firstchild);
}
それ以外
{var el_next = el.nextsibling;
var el_parent = el.parentnode;
el_parent.removechild(el);
el.innerhtml = htmlcode;
if(el_next)
el_parent.insertbefore(el、el_next)
それ以外
el_parent.appendchild(el);
}
}
上記のコードには別の問題があります。挿入された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 <arguments.length; i ++){
引数=引数[i];
if(typeof引数== 'string'){
var el = body.appendchild(document.createelement( 'div'));
set_innerhtml(el、argument)
}
}
}