script 要素とイベントの実行

.NET Framework 3.0

IE9 標準モードでは、script 要素の標準ベースで相互運用可能な load イベントが導入されました。以前のバージョンの Windows Internet Explorer では、script 要素の、相互運用が不可能な onreadystatechange イベントだけがサポートされていました。

既にある Web サイトとの互換性のために、onreadystatechange イベントは、IE9 モードでもサポートされます。ただし、これらのイベントの両方に登録しているサイトは、2 つのコールバックを持つようになりました。以前のバージョンの Internet Explorer では、コールバックは 1 つだけでした。

通常、これらのイベントは、ページの読み込みをブロックしないために、後の時点で機能を実行するために使われます。このような場合、機能検出が行われないと、onreadystatechangeload の両方に登録しているため、コールバックが 2 回実行されます。その結果、多くの場合、スクリプト エラーやページ機能の異常が発生します。

このようなシナリオでは、標準ベースの load イベントをお勧めします。できるだけ、このイベントを使ってください。Web 開発者は、script 要素の load イベントをサポートするブラウザーを検出するために、機能検出を使う必要があります。従来のバージョンの Internet Explorer では、スクリプトは onreadystatechange を使うようにフォールバックする必要があります。

次のコード例は、正しくないコーディング パターンを示しています。

s = document.createElement("script");
s.src="readystate.js";
s.onreadystatechange = callback; //Legacy IE
s.onload = callback; //Other browsers
document.body.appendChild(s);
function callback() { console.log("loaded"); }

次のコード例は、お勧めするパターンを示しています。

s = document.createElement("script");
s.src="myscript.js";
if(s.addEventListener) {
  s.addEventListener("load",callback,false);
} 
else if(s.readyState) {
  s.onreadystatechange = callback;
}
document.body.appendChild(s);
function callback() { console.log("loaded"); }

関連トピック

 

 

表示:
© 2014 Microsoft