From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/htmlscriptelement/index.html | 284 +++++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 files/zh-cn/web/api/htmlscriptelement/index.html (limited to 'files/zh-cn/web/api/htmlscriptelement') diff --git a/files/zh-cn/web/api/htmlscriptelement/index.html b/files/zh-cn/web/api/htmlscriptelement/index.html new file mode 100644 index 0000000000..c9b85d01e8 --- /dev/null +++ b/files/zh-cn/web/api/htmlscriptelement/index.html @@ -0,0 +1,284 @@ +--- +title: HTMLScriptElement +slug: Web/API/HTMLScriptElement +translation_of: Web/API/HTMLScriptElement +--- +
{{ APIRef("HTML DOM") }}
+ +

HTML脚本元素暴露HTMLScriptElement接口,它提供了特殊的属性和方法(超出了常规HTMLElement对象接口,他们也可以通过继承操纵<脚本>元素的布局和演示。)
+  

+ +

Properties

+ +

从其父类中继承的属性, {{domxref("HTMLElement")}}。
+  

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
type{{domxref("DOMString")}}代表了脚本的MIME类型。它反映了{{htmlattrxref("type","script")}} 属性。如何解析奇异的编程语言,请阅读这篇文章。
src{{domxref("DOMString")}}代表了使用外部脚本资源的地址。它反映了{{htmlattrxref("src","script")}}属性。
htmlFor {{obsolete_inline}}{{domxref("DOMString")}}他htmlFor属性设置或返回的值的属性标签。属性指定的表单元素绑定到一个标签。
event{{obsolete_inline}}{{domxref("DOMString")}}HTML DOM事件允许JavaScript注册不同的事件处理程序的元素在一个HTML文档。
charset{{domxref("DOMString")}}代表外部脚本资源的字符编码。它反映了{{htmlattrxref("charset","script")}} 属性。
async{{domxref("Boolean")}} +

async和defer属性值为bool,它用来说明script脚本应该如何执行。在没有src属性的情况下,async和defer属性可以不指定值。

+ +

使用该属性有三种模式可供选择,如果async属性存在,脚本将异步执行,只要它是可用的,如果async属性不存在,而defer属性存在,脚本将会在页面完成解析后执行,如果都不存在,那么脚本会在useragent解析页面之前被取出并立刻执行。

+ +
注意:这些属性的处理细节,主要是历史原因,有些重要的,涉及很多方面的HTML。因此实现需求的必要性分散在规范。这些描述这个处理的核心算法,但这些算法参考和引用的解析规则{ HTMLElement("脚本")} { }开始和结束标记在HTML中,在国外内容,并在XML中,规则的document . write()方法,处理脚本等。
+ +

延迟属性可以指定即使指定异步属性,导致遗留Web浏览器只支持推迟(而不是异步)回落推迟行为而不是同步阻塞是默认的行为。

+
defer{{domxref("Boolean")}}
crossOrigin {{experimental_inline}}{{domxref("DOMString")}}是一个{{domxref("DOMString")}},对应于歌珥设置这个脚本元素。有关详细信息,请参阅歌珥设置属性。这对脚本控制,从其他来源,获得错误信息是否会被暴露出来。
text{{domxref("DOMString")}} +

IDL属性内容的文本必须返回一个连接的所有文本节点的孩子{{HTMLElement("script")}}元素(忽略任何其他节点如评论或元素),在树的顺序。设置,它必须采取行动一样textContent IDL属性。

+ +
注意:当插入使用document . write()方法,{ { HTMLElement("脚本")} }元素执行(通常是同步),但当插入使用innerHTML和outerHTML属性,他们不执行。
+
+ +

Methods

+ +

没有具体的方法;属性从其父类继承, {{domxref("HTMLElement")}}。

+ +

例子

+ +

动态导入脚本

+ +

让我们创建一个名为importScript的函数,它能够在一个文档中导入新的脚本,创建一个{{HTMLElement("script")}} 节点,并立即插入到宿主{{HTMLElement("script")}} 之前 (通过 {{domxref("document.currentScript")}} 可以获取宿主script标签)。这些脚本将异步执行。更多细节,请参见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.onerror = loadError;
+  if (fOnload) { oScript.onload = fOnload; }
+  document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
+  oScript.src = sSrc;
+}
+ +

…the same thing, but appending the new scripts as last childs of the {{ HTMLElement("head") }} tag, instead of appending them immediately before the {{domxref("document.currentScript")}} element:

+ +

与上面大致相同,但有一点不同的是 新创建的script标签插入到了{{HTMLElement("head")}}标签的的最后,而不是插入到了{{domxref("document.currentScript")}}元素之前:

+ +
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.onerror = loadError;
+    if (fOnload) { oScript.onload = fOnload; }
+    oHead.appendChild(oScript);
+    oScript.src = sSrc;
+  }
+
+})(document.head || document.getElementsByTagName("head")[0]);
+
+ +

示例用法:

+ +
importScript("myScript1.js");
+importScript("myScript2.js", /* onload function: */ function () { alert("You read this alert because the script \"myScript2.js\" has been correctly loaded."); });
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting-1.html#the-script-element", "HTMLScriptElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5.1', "scripting-1.html#the-script-element", "HTMLScriptElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}}{{Spec2('HTML5 W3C')}}The following properties are now obsolete: htmlFor,.
{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
async{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}10{{CompatNo}}{{CompatVersionUnknown}}
defer{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}} +

4 (follows a spec of its own)

+ +

10 (by the spec)

+
{{CompatNo}}{{CompatVersionUnknown}}
crossOrigin {{experimental_inline}}{{WebKitBug(81438)}}{{CompatGeckoDesktop("13")}} {{bug(696301)}}{{CompatNo}}{{CompatNo}}{{WebKitBug(81438)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
async{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
defer{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
crossOrigin {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Gecko-specific notes

+ +

  从Gecko2.0 { { geckoRelease(" 2.0 ")} },插入脚本创建的元素通过调用document.createElement(“脚本”)到DOM不再强制执行插入顺序。这种变化让Gecko正确遵守HTML5规范。让script-inserted外部脚本执行的插入顺序,设置异步属性为false。
+   

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf