この文書は翻訳中です。他国語のままの部分などがあるのはその為です。
是非お気軽に MDN に登録して翻訳に参加し、私たちの手助けをして下さい!
DOMの Script
オブジェクトはHTMLScriptElement (または HTML 4 HTMLScriptElement
)インターフェイスに具現化されます.それは通常のelementオブジェクトインターフェイスに加えて(継承によって利用可能),<script>
要素のレイアウトおよび表現を扱う特別なプロパティとメソッドを提供します.
プロパティ
親である HTMLElement
からプロパティを継承しています.
Name | Type | Description |
---|---|---|
type |
DOMString |
スクリプトのMIME typeを表します.これはtype 属性を反映します. |
src |
DOMString |
使用される外部スクリプトリソースのアドレスを表します.これは |
htmlFor |
DOMString |
[Description missing] |
event |
DOMString |
[Description missing] |
charset |
DOMString |
外部スクリプトリソースの文字エンコードを表します.これはcharset 属性を反映します. |
async |
Boolean |
これら2つの属性値を用いて選択可能な3つのモードがあります.
注記: これらの属性の正確な処理の詳細は,大部分が歴史的な理由により,幾分複雑でHTMLの様々な局面に関連しています.従って,実装の要件は,仕様の至る所に散らばっている必要性によります.These algorithms describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for
<script> start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc.The |
defer |
Boolean |
|
crossOrigin |
DOMString |
Is a DOMString that corresponds to the CORS setting for this script element. See CORS settings attributes for details. It controls, for scripts that are obtained from other origins, whether error information will be exposed. |
text |
DOMString |
IDLの 注記: |
メソッド
固有のメソッドはありません;親である, HTMLElement
から継承しています.
例
例#1: スクリプトを動的にインポートする
新しいスクリプトをドキュメント内にインポート可能にするためimportScript(url[, onloadFunction])
と名付けた関数を生成しましょう.インポートはドキュメントの(既存の)<script>
の直前に(新たな)<script>
ノードを生成して行ないます.既存の<script>
は,下記のコード(document.currentScript
通じて取得)を提供するものです.これらのスクリプトは非同期的に実行されます.詳細はdefer
およびasync
プロパティを参照.
function loadError (oError) { throw new URIError("The script " + oError.target.src + " is not accessible."); } function importScript (sSrc, fOnload) { var oScript = document.createElement("script"); oScript.type = "text\/javascript"; oScript.src = sSrc; oScript.onerror = loadError; if (fOnload) { oScript.onload = fOnload; } document.currentScript.parentNode.insertBefore(oScript, document.currentScript); }
同じことだがスクリプトをdocument.currentScript
要素の直前に加える代わりに,<head>
タグの末尾の子として加えています.
var importScript = (function (oHead) { function loadError (oError) { throw new URIError("The script " + oError.target.src + " is not accessible."); } return function (sSrc, fOnload) { var oScript = document.createElement("script"); oScript.type = "text\/javascript"; oScript.src = sSrc; oScript.onerror = loadError; if (fOnload) { oScript.onload = fOnload; } oHead.appendChild(oScript); } })(document.getElementsByTagName("head")[0]);
使用法:
importScript("myScript1.js"); importScript("myScript2.js", /* onload 関数: */ function () { alert("You read this alert because the script \"myScript2.js\" has been correctly loaded."); });
仕様
仕様 | 地位 | コメント |
---|---|---|
WHATWG HTML Living Standard The definition of 'HTMLScriptElement' in that specification. |
Living Standard | No change from HTML5. |
HTML5 The definition of 'HTMLScriptElement' in that specification. |
勧告案 | The following properties are now obsolete: htmlFor, . |
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLScriptElement' in that specification. |
勧告 | No change from Document Object Model (DOM) Level 1 Specification. |
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLScriptElement' in that specification. |
勧告 | Initial definition. |
ブラウザ互換性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | (有) | (有) | (有) |
async |
(有) | 3.6 (1.9.2) | 10 | 未サポート | (有) |
defer |
(有) | 3.5 (1.9.1) |
4 (follows a spec of its own) 10 (by the spec) |
未サポート | (有) |
crossOrigin |
WebKit bug 81438 | 13 (13) バグ 696301 | 未サポート | 未サポート | WebKit bug 81438 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (有) | 1.0 (1.0) | (有) | (有) | (有) |
async |
(有) | 1.0 (1.0) | 未サポート | ? | (有) |
defer |
(有) | 1.0 (1.0) | 未サポート | ? | (有) |
crossOrigin |
? | ? | ? | ? | ? |
Gecko限定の注記
Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), inserting script elements that have been created by calling document.createElement("script")
into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set the async
property to false
on them.
Also, <script>
elements inside <iframe>
, <noembed>
and <noframes>
elements are now executed, for the same reasons.
参考
- HTML
<script>
element - HTML
<noscript>
element document.currentScript
- Web Workers (code snippets similar to scripts but executed in another global context)
- Ryan Grove's <script> and <link> node event compatibility chart