| 型 | プロパティ | |
|---|---|---|
| String | type | |
| String | src | |
| String | charset | 外部スクリプトの文字エンコーディング。非推奨 |
| Boolean | async | |
| Boolean | defer | |
| String | crossOrigin | |
| String | text | |
| Boolean | noModule | |
| String | referrerPolicy |
onloadで、スクリプトの読み込み完了を捕捉できます。
var script = document.createElement( 'script' );
script.src = filename;
script.onload = function( e )
{
//
}
document.body.appendChild( script );
ただしHTTPステータスでエラーが返されると、スクリプトの読み込みが完了してもこのイベントは発生しません。
javascript - 'onload' handler for 'script' tag in internet explorer - Stack Overflow
Internet Explorerのいくつかのバージョンでは、スクリプトの読み込み時にonreadystatechangeイベントが発生します。しかしInternet Explorer 11以降ではscriptのonreadystatechangeはサポートされなくなり、代替としてonloadを使うものとされています。readystatechange | onreadystatechange event (Internet Explorer) | MSDN
onerrorで、スクリプトの読み込みの失敗を捕捉できます。
var script = document.createElement( 'script' );
script.src = filename;
script.onerror = function( error )
{
//
}
document.body.appendChild( script );
ただしonerrorエラーハンドラでは、エラーを捕捉できないこともあります。javascript - How to tell if a <script> tag failed to load - Stack Overflow
存在しないスクリプトを読み込み、エラーハンドラに渡されるオブジェクトのプロパティを確認できます。
スクリプトを実行中のscript要素自身を取得します。
<script type="text/javascript"> var scripts = document.getElementsByTagName( 'script' ); var currentScript = scripts[ scripts.length - 1 ]; </script>
DOMは記述された順に構築され、script要素はそれが記述された場所で実行されます。そのためDOMの最後のscript要素が、それを実行しているscript要素自身となります。
この方法は動的に読み込んだスクリプトには適用できません。
HTMLテキストを追加するなら、HTMLDocument.write()で
document.write( 'abc' );
とするだけです。またHTML要素を含む場合も、
document.write( '<b>abc</b>' );
のようにHTMLのコードを文字列で記述することで、たいていのブラウザはそれを解釈してくれます。もしこれをDOMの操作で行うならば、前述のscript要素を取得する方法を用いて、次のようにします。
<script type="text/javascript"> var node = document.createElement( 'div' ); // 追加する要素 var scripts = document.getElementsByTagName( 'script' ); var currentScript = scripts[ scripts.length - 1 ]; // このscript要素の直前にnodeを追加する currentScript.parentNode.insertBefore( node, currentScript ); </script>