HTMLScript标签:的知识和功能

你对脚本这个常用的标签了解多少？随着这个脚本标签的改进，添加了一些html5的东西，比如async和defer、crossorigin、for/event等等。

您可能知道，脚本标签用于指定在网页上执行哪个JavaScript。脚本标签可以直接包含JavaScript代码，或者指向一个JavaScript外链URL。

脚本标记按照它们出现的顺序执行，下面的代码直观地说明了这一点：

脚本

varx=3；

/script

脚本

alert(x)；

//威勒特' 3 '；

/script

使用外部链资源时，装载顺序并不那么直观，但它仍然适用：

script src='//typekit.com/fj5j 4j 3 . js '/script

！-在类型套件执行完毕或超时之前，不会执行第二个脚本。-

script src='//my . site/script . js '/script

如果您混合了线外和线内JavaScript，这条规则也适用。

这意味着，如果您的网站在页面的前部加载了一个缓慢的脚本，您的页面加载将显著减慢。这也意味着稍后加载的脚本可以依赖于首先加载的脚本。

页面元素只有在加载完之前的所有脚本后才会呈现。这意味着你可以——你可以在加载之前在网页上做各种疯狂的事情，当然前提是你不关心性能问题。

但是，该规则不适用于在网页加载后通过document.appendChild等方法向DOM添加脚本标签。这些标签会按照浏览器请求处理的顺序执行脚本，加载顺序不再保证。

当一个脚本标签被执行时，它之前的HTML元素可以被访问(但是它之后的元素还不能被使用)

超文本标记语言

头

脚本

//document.headisavailable

//document.bodyisnot！

/script

/head

身体

脚本

//document.headisavailable

//document.bodyisavailable

/script

/body

/html

你可以想象一下，HTML解析器通过标签访问文档标签，解析脚本标签的时候，立刻执行其中的JavaScript。这意味着在当前JavaScript中只能访问开始标记出现在当前脚本之前的DOM节点(通过querySelectorALl、jQuery等)。).

一个有用的推论是，document.head在任何写在网页上的JavaScript中几乎总是可用的。Document.body仅在将脚本标记写入body标记中或之后时可用。

HTML5增加了两个工具来控制脚本的执行。

Async的意思是“不要马上执行”。更具体地说，它的意思是：我不介意你在整个网页加载后执行这个脚本，而把它放在其他脚本执行后。这对于统计分析脚本非常有用，因为页面上没有其他需要依赖统计脚本执行的代码。在异步代码中定义页面所需的变量或函数是不可能的，因为您无法知道异步代码将在何时实际执行。

延迟意味着“等待页面解析完成后再执行”。这大致相当于将您的脚本绑定到DOMContentedLoaded事件，或者使用jQuery.ready。当执行这段代码时，DOM中的所有元素都可用。与异步不同，所有带有延迟的脚本都将按照它们在网页中出现的顺序执行，并且只会被延迟到网页被解析之后。

html :中脚本标记中类型属性的用法

历史上(自从Netsacpe2诞生以来)，如果你在脚本标签上写type=text/javascript也没关系。如果您通过“类型”设置非JavaScript MIME类型，浏览器将不会执行它。当你想定义自己的语言时，这很酷：

scripttype='text/emerald '

制作社交网络

但是对猫来说

/script

这段代码的实际执行结果由您自己决定，例如：

脚本

varcodez=document . query selectorall(' script[type=' text/emerald ']')；

for(vari=0；icodez.lengthI)

runEmeraldCode(codez[i]。innerHTML)；

/script

定义runEmeraldCode函数，并把它作为一个练习留给你。

如果您有特殊需要，也可以使用元标记重写页面上脚本标记的默认类型：

元http-equiv='内容-脚本-类型' content='text/vbscript '

或者一个请求返回一个内容-脚本-类型头。

您可以使用交叉原点

虽然没有完全标准化，但是一些浏览器支持crossorigin属性。基本思想是浏览器会限制使用非同源资源(同源资源是指相同的协议、主机名和端口，例如：` http://google.com:80)。

这是为了防止你，例如，向你的竞争对手的网站发送取消你的用户在其他网站上的帐户的请求(这是不好的！)。虽然这个问题涉及脚本标签，有点出乎意料，但是如果实现了crossorigin，只需要在window.onerror事件中添加一个处理程序，就可以在控制台上看到一些警告消息，提示您引入一个不应该引入的异地脚本。在安全浏览器中，除非您指定crossorigin属性，否则加载异地脚本时不会出错。

Crossorgin不是一种神奇的安全手段，它所做的只是让浏览器启用正常的CORS访问检查，启动一个选项请求并检查访问控制头。

HTML脚本标记和内部HTMl:

通过DOM动态添加到页面的脚本标记由浏览器执行：

varmyScript=document . CreateElement(' script ')；

myScript.textContent='alert('？')';

document . head . appendchild(Myscript)；

不会执行通过innerHTML动态添加到页面的脚本标记：

document . head . InnerHTMl=' script alert '(？)/script '；

这样做的原因不一定，但它解决了一个小问题：“有没有办法让一个脚本标签在Chrome Code Inspector中显示出来，但不被实际执行？”

本文转载自中文网站