path: root/files/ja/web/api/htmlscriptelement/index.html

---
title: HTMLScriptElement
slug: Web/API/HTMLScriptElement
translation_of: Web/API/HTMLScriptElement
---
<p>{{ApiRef}}</p>

<p>DOMの <code>Script</code>オブジェクトは<a class="external" href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element" title="http://dev.w3.org/html5/spec/the-input-element.html#htmlinputelement">HTMLScriptElement</a> (または {{ HTMLVersionInline(4) }} <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-81598695"><code>HTMLScriptElement</code></a>)インターフェイスに具現化されます．それは通常の<a href="/en-US/docs/DOM/element" rel="internal">element</a>オブジェクトインターフェイスに加えて(継承によって利用可能)，{{ HTMLElement("script") }} 要素のレイアウトおよび表現を扱う特別なプロパティとメソッドを提供します．</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<p><em>親である </em><em>{{domxref("HTMLElement")}}</em><em>からプロパティを継承しています.</em></p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Name</th>
   <th>Type</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code id="type_property">type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>スクリプトの<a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#valid-mime-type" title="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#valid-mime-type">MIME type</a>を表します．これは{{htmlattrxref("type","script")}}属性を反映します．</td>
  </tr>
  <tr>
   <td><code id="src_property">src</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>使用される外部スクリプトリソースのアドレスを表します．これは {{htmlattrxref("src","script")}}属性を反映します．</p>
   </td>
  </tr>
  <tr>
   <td><code id="htmlFor_property">htmlFor</code> {{obsolete_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>[Description missing]</td>
  </tr>
  <tr>
   <td><code id="event_property">event</code>{{obsolete_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>[Description missing]</td>
  </tr>
  <tr>
   <td><code id="charset_property">charset</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>外部スクリプトリソースの文字エンコードを表します．これは{{htmlattrxref("charset","script")}}属性を反映します．</td>
  </tr>
  <tr>
   <td><code id="async_property">async</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td rowspan="2">
    <p><code>async</code>と<code>defer</code>属性は<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a>属性です．スクリプトがどのように実行されるべきかを示します． <strong><code>defer</code> および <code>async</code> 属性は</strong><strong><code>，src</code> </strong><strong>属性が無ければ指定してはならない．</strong></p>

    <p>これら2つの属性値を用いて選択可能な3つのモードがあります．<code>async</code>属性があれば，スクリプトは可能な限り非同期的に実行されます．<code>async</code>属性が無く<code>defer</code>属性があれば. スクリプトはページのパースが完了した時点で実行されます．両方の属性があれば，スクリプトはユーザーエージェントによるページのパース完了を待つこと無く，フェッチ後，直ちに実行されます．</p>

    <div class="note"><strong>注記:</strong> これらの属性の正確な処理の詳細は，大部分が歴史的な理由により，幾分複雑でHTMLの様々な局面に関連しています．従って，実装の要件は，仕様の至る所に散らばっている必要性によります．<a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script" title="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">These algorithms</a> describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for {{ HTMLElement("script") }} <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">start</a> and <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">end</a> tags in HTML, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">in foreign content</a>, and <a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML" title="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML">in XML</a>, the rules for the <a href="/en-US/docs/DOM/document.write" title="/en-US/docs/DOM/document.write"><code>document.write()</code></a> method, the handling of <a href="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting" title="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">scripting</a>, etc.</div>

    <p>The <code>defer</code> attribute may be specified even if the <code>async</code> attribute is specified, to cause legacy Web browsers that only support <code>defer</code> (and not <code>async</code>) to fall back to the <code>defer</code> behavior instead of the synchronous blocking behavior that is the default.</p>
   </td>
  </tr>
  <tr>
   <td><code id="defer_property">defer</code></td>
   <td>{{domxref("Boolean")}}</td>
  </tr>
  <tr>
   <td><code id="crossOrigin_property">crossOrigin</code> {{experimental_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this script element. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> for details. It controls, for scripts that are obtained from other <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#origin-0" title="http://www.w3.org/html/wg/drafts/html/master/browsers.html#origin-0">origins</a>, whether error information will be exposed.</td>
  </tr>
  <tr>
   <td><code id="text_property">text</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>IDLの<code>text</code>属性は，すべてのテキストノード(<a href="/en-US/docs/DOM/Text" title="/en-US/docs/DOM/Text"><code>Text</code> nodes</a>)内容の連結を返さなければなりません．(コメントや要素のような他のノードを無視すれば)テキストノードは，木構造(tree)上の順序でscript要素の子要素です．設定上，これはIDLの<a href="/en-US/docs/DOM/Node.textContent" title="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a>属性と同様に機能せねばなりません．</p>

    <p><strong>注記:</strong>  <a href="/en-US/docs/DOM/document.write" title="/en-US/docs/DOM/document.write"><code>document.write()</code></a> メソッドを用いて, {{HTMLElement("script") }} 要素を挿入した時，実行されます(典型的には同期的に)．しかし,  <a href="/en-US/docs/DOM/element.innerHTML" title="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> and <a href="/en-US/docs/DOM/element.outerHTML" title="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a> 属性を用いて挿入した場合,結局何も実行されません．</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="メソッド">メソッド</h2>

<p><em>固有のメソッドはありません;親である</em><em>, {{domxref("HTMLElement")}}</em><em>から継承しています.</em></p>

<h2 id="例">例</h2>

<h3 id="例1_スクリプトを動的にインポートする">例#1: スクリプトを動的にインポートする</h3>

<p>新しいスクリプトをドキュメント内にインポート可能にするため<code>importScript(<em>url</em>[, <em>onloadFunction</em>])</code>と名付けた関数を生成しましょう．インポートはドキュメントの(既存の){{ HTMLElement("script") }}の直前に(新たな){{ HTMLElement("script") }}ノードを生成して行ないます．既存の{{ HTMLElement("script") }}は，下記のコード({{domxref("document.currentScript")}}通じて取得)を提供するものです．これらのスクリプトは<strong>非同期的に</strong>実行されます．詳細は<a href="#defer_property" title="#defer_property"><code>defer</code></a>および<a href="#async_property" title="#async_property"><code>async</code></a>プロパティを参照．</p>

<pre class="brush: js">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);
}</pre>

<p>同じことだがスクリプトを{{domxref("document.currentScript")}}要素の直前に加える代わりに，{{ HTMLElement("head") }} タグの末尾の子として加えています．　</p>

<pre class="brush: js">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]);
</pre>

<p>使用法:</p>

<pre class="brush: js">importScript("myScript1.js");
importScript("myScript2.js", /* onload 関数: */ function () {
alert("You read this alert because the script \"myScript2.js\" has been correctly loaded."); });</pre>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">地位</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>The following properties are now obsolete: <code>htmlFor,</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>No change from {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザ互換性">ブラウザ互換性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>async</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>10</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>defer</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>
    <p>4 (follows a spec of its own)</p>

    <p>10 (by the spec)</p>
   </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>crossOrigin</code> {{experimental_inline}}</td>
   <td>{{WebKitBug(81438)}}</td>
   <td>{{CompatGeckoDesktop("13")}} {{bug(696301)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{WebKitBug(81438)}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>async</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>defer</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>crossOrigin</code> {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Gecko限定の注記">Gecko限定の注記</h3>

<p>Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> 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 <code>async</code> property to <code>false</code> on them.</p>

<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p>

<h2 id="参考">参考</h2>

<ul>
 <li>HTML {{ HTMLElement("script") }} element</li>
 <li>HTML {{ HTMLElement("noscript") }} element</li>
 <li>{{domxref("document.currentScript")}}</li>
 <li><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (code snippets similar to scripts but executed in <a href="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope" title="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope">another global context</a>)</li>
 <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>