path: root/files/zh-tw/web/html/element/script/index.html

---
title: <script>
slug: Web/HTML/Element/script
translation_of: Web/HTML/Element/script
---
<p><span class="seoSummary"><strong>HTML <code>&lt;script&gt;</code> 元素</strong>能嵌入或引用要執行的程式碼。最常見的用途是嵌入或引用 JavaScript 程式碼。</span>&lt;script&gt; 元素也能執行其他語言，例如 <a href="/zh-TW/docs/Web/API/WebGL_API">WebGL</a> 的 GLSL shader 程式語言。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories">內容類型</a></th>
   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元資料內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">允許的內容</th>
   <td>動態腳本如 <code>text/javascript</code>.</td>
  </tr>
  <tr>
   <th scope="row">標籤省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允許的父元素</th>
   <td>任何可接受 <a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元資料內容</a>或 <a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td>
  </tr>
  <tr>
   <th scope="row">允許的 ARIA role</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">DOM 介面</th>
   <td>{{domxref("HTMLScriptElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="屬性">屬性</h2>

<p>此元素包含了<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p>

<dl>
 <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
 <dd>這個布林屬性告訴瀏覽器說：如果可以，就以非同步的方法執行腳本。</dd>
</dl>

<div class="warning">
<p>如果沒有 <code>src</code> 屬性的話，就不能用這個屬性（例如行內腳本）：在這種情況下，它將失去作用。</p>
</div>

<dl>
 <dd>
 <p>在 HTML 解析時，瀏覽器通常會假定最壞的情況，並同步地載入腳本（例如 <code>async=false</code>）。</p>
 </dd>
 <dd>
 <p>動態插入的腳本（例如 <code>document.createElement</code>）一般來說是非同步執行的。因此，如果設定同步的話（腳本按照被插入的順序執行），會被設為 <code>async=false</code>。</p>

 <p>請參見 {{anch("Browser compatibility")}} 的瀏覽器支援備註。另請參見 <a href="/zh-TW/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>。</p>
 </dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>針對沒有通過標準 <a href="/zh-TW/docs/HTTP_access_control">CORS</a> 的一般 <code>script</code> 元素，會把最少的資訊傳給 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}。若要允許另一個域名站點的靜態內容，列出錯誤訊息，請使用此屬性。請參見 <a href="/zh-TW/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 以以取得對其有效參數的，更具描述性的解釋。</dd>
 <dt>{{htmlattrdef("defer")}}</dt>
 <dd>設置此 Boolean attribute 是為了指示瀏覽器， script 應在 document 解析後，但在 firing {{event("DOMContentLoaded")}} 之前被執行。</dd>
 <dd>具有 <code>defer</code> 屬性的 scripts 將阻止觸發<code>DOMContentLoaded</code> 事件，直到 scripts load 完成並且 finished evaluating。</dd>
</dl>

<div class="warning">
<p>如果沒有 <code>src</code> 屬性的話，就不能用這個屬性（例如行內腳本）：在這種情況下，它將失去作用。</p>

<p>The <code>defer</code> attribute has no effect on <a href="/zh-TW/docs/Web/JavaScript/Guide/Modules">module scripts </a>— they defer by default.</p>
</div>

<dl>
 <dd>
 <p>Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</p>

 <p>This attribute allows the elimination of <strong>parser-blocking JavaScript</strong> where the browser would have to load and evaluate scripts before continuing to parse. <code>async</code> has a similar effect in this case.</p>
 </dd>
 <dt>{{htmlattrdef("integrity")}}</dt>
 <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/zh-TW/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
 <dt>{{htmlattrdef("nomodule")}}</dt>
 <dd>這個布林屬性，會要求支援 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 modules</a> 的瀏覽器，不執行裡面的程式。這能用來給不支援 JavaScript 模組的老舊瀏覽器，提供用於向下支援的服務。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("nonce")}}</dt>
 <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/zh-TW/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>此屬性指定外部程式的 <abbr>URI</abbr>，可以用來取代直接在文件內中嵌入腳本。</dd>
</dl>

<div class="warning">
<p>如果 <code>script</code> 元素有指定 <code>src</code> 屬性的話，標籤內就不能有嵌入的腳本。</p>
</div>

<dl>
 <dt>{{htmlattrdef("text")}}</dt>
 <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>
 <p>此屬性指定程式碼應該表示的類型。此屬性的值會屬於以下類別之一：</p>

 <ul>
  <li><strong>省略或 JavaScript MIME 類型</strong>：針對相容 HTML5 的瀏覽器來說，元素內會執行 JavaScript。HTML5 規範敦促作者省略此屬性，不需要寫冗長的 MIME 類型。在早期的瀏覽器中，這確定了嵌入或引入（透過 <code>src</code> 屬性）腳本的語言。JavaScript MIME 類型<a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">有列在規範內</a>。</li>
  <li><strong><code>module</code></strong>：{{HTMLVersionInline(5)}} {{experimental_inline}} 針對相容 HTML5 的瀏覽器來說，這段程式碼會當成 JavaScript 模組（module）。腳本內容的處理不受 <code>charset</code> 與 <code>defer</code> 屬性影響。針對 <code>module</code> 的資訊，請參閱 <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>。在使用 <code>module</code> 關鍵字時，程式碼的行為會有所不同。</li>
  <li><strong>其他值</strong>：嵌入的內容會被當成一段不給瀏覽器執行的資料塊（data block）。開發者應當使用非 JavaScript 的有效 MIME 類型，以標明資料塊。<code>src</code> 屬性也將被忽略。</li>
 </ul>

 <div class="note">
 <p><strong>注：</strong>在 Firefox 你可以在 <code>&lt;script&gt;</code> 元素的 <code>type</code> 屬性，透過標明非標準參數 <code>version</code>，指定要使用的 JavaScript 版本：例如說 <code>type="application/javascript;version=1.8"</code>。這個功能在 Firefox 59 移除了（請參見 {{bug(1428745)}}）。</p>
 </div>
 </dd>
</dl>

<h3 id="棄用屬性">棄用屬性</h3>

<dl>
 <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
 <dd>如同 <code>type</code> 屬性，此屬性指定正在使用的腳本語言。但與 <code>type</code> 屬性不同，此屬性的可用值從未標準化。應當使用 <code>type</code> 屬性。</dd>
</dl>

<h2 id="註解">註解</h2>

<p>Scripts without <code>async</code> or <code>defer</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p>

<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>); a video type (<code>video/*</code>); an audio (<code>audio/*</code>) type; or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("load")}} event is sent.</p>

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

<h3 id="基本">基本</h3>

<p>以下示例展示如何在 HTML4 與 HTML5 使用 <code>&lt;script&gt;</code> 屬性。</p>

<pre class="brush: html notranslate">&lt;!-- HTML4 與  (x)HTML --&gt;
&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;

&lt;!-- HTML5 --&gt;
&lt;script src="javascript.js"&gt;&lt;/script&gt;
</pre>

<h3 id="模組的向下支援方案">模組的向下支援方案</h3>

<p>有針對 type 屬性支援 module（模組）的瀏覽器，會忽略 nomodule 屬性的程式碼。這能讓那些不支援模組的瀏覽器，提供替代的使用方法。</p>

<pre class="brush: js notranslate">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;</pre>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">規範</th>
   <th scope="col">狀態</th>
   <th scope="col">註解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Adds the module type</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '&lt;script&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '&lt;script&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '&lt;script&gt;')}}</td>
   <td>{{Spec2('Subresource Integrity')}}</td>
   <td>Adds the integrity attribute.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<p>The information shown below has been pulled from MDN's Github (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>)</p>

<div>
<p>{{Compat("html.elements.script", 2)}}</p>
</div>

<h2 id="相容性註解">相容性註解</h2>

<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p>

<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>.async=false</code> on the scripts you want to maintain order.</p>

<div class="warning">
<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p>
</div>

<h2 id="參見">參見</h2>

<ul>
 <li>{{domxref("document.currentScript")}}</li>
 <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>

<div>{{HTMLRef}}</div>