What is the role of the
script tag in HTML? What is the usage of type attribute in script tag? This article mainly explains the relevant knowledge and functions of the HTML Script tag and the usage of the type attribute in the script tag.
Related knowledge and functions of the HTML Script tag:
How much do you know about script, a frequently used tag? With the improvement of this script tag, some HTML5 things have been added, such as async and defer, crossorigin, for / event, etc.
As you may know, the script tag is used to specify which JavaScript is executed on the web page. Script tags can contain JavaScript code directly, or point to a JavaScript external URL.
Script tags are executed in the order they appear. The following code illustrates this intuitively:
<script> var x = 3; </script> <script> alert(x); // Will alert '3'; </script>
The loading order is not so intuitive when using external link resources, but it is still true. :
<script src="//typekit.com/fj5j4j3.js"></script> <!-- 在Type套件已执行或超时之前，此第二脚本不会执行。 --> <script src="//my.site/script.js"></script>
The same rule applies if you mix external links and inline JavaScript.
This means that if your website has slow scripts that are loaded earlier in the page, your page loading will be significantly slower. This also means that scripts loaded later can depend on scripts loaded earlier.
The page element will not be rendered until all scripts before it have been loaded. This means that you can do all kinds of crazy things on your web pages before they load, as long as you don't care about the performance issues this causes.
However, this rule does not apply to adding script tags to the DOM through methods such as document.appendChild after the web page is loaded. These tags will execute the scripts in the order in which the browser request processing is completed, and the loading order is no longer guaranteed.
When a script tag is executed, the HTML elements before it can be accessed (but those after it are not yet available)
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>
</head>
<body>
<script>
// document.head is available
// document.body is available
</script>
</body>
</html>You can imagine the HTML parser accessing tag by tag document, when it parses the script tag, the JavaScript in it is immediately executed. This means that only DOM nodes whose start tag appears before the current script can be accessed in the current JavaScript (via querySelectorALl, jQuery, etc.).
A useful corollary is that document.head is almost always available in any JavaScript written on a web page. document.body is only available if you write the script tag inside or after the
tag.HTML5 adds two tools to control script execution.
async means "you don't need to execute it immediately". More specifically it says: I don't mind if you execute this script after the entire page has loaded, putting it after other scripts. This is very useful for statistical analysis scripts because no other code on the page needs to depend on the statistics script execution. Defining variables or functions that a page needs is not possible in async code because you have no way of knowing when the async code will actually be executed.
defer means "wait for the page to be parsed before executing". It's roughly equivalent to binding your script to the DOMContentedLoaded event, or using jQuery.ready. When this code is executed, all elements in the DOM are available. Unlike async, all defer scripts will be executed in the order they appear in the HTML page, it is just postponed until the HTML page is parsed.
Usage of the type attribute in the script tag in html:
Historically (since the birth of Netsacpe 2), whether to write type= on the script tag text/javascript has nothing to do with it. If you set a non-JavaScript MIME type via type, the browser will not execute it. This is cool when you want to define your own language:
<script type="text/emerald">
make a social network
but for cats
</script>The actual execution result of this code is up to you, such as:
<script>
var codez = document.querySelectorAll('script[type="text/emerald"]');
for (var i=0; i < codez.length; i++)
runEmeraldCode(codez[i].innerHTML);
</script>The definition of runEmeraldCode function is left to you as practise.
If you have special needs, you can also override the default type of the script tag on the page by passing a meta tag:
<meta http-equiv="Content-Script-Type" content="text/vbscript">
or a request returning a Content-Script-Type header.
You can use crossorigin
Although it has not been fully standardized, some browsers support the crossorigin attribute. The basic idea is that the browser will restrict the use of non-original resources (homologous resources are the same protocol, hostname and port, for example: `http://google.com:80).
This is to prevent you from, for example, making a request to your competitor's website to log out your user's account on that website (this is not good!). Although it is a bit unexpected that this problem involves the script tag, if crossorigin is implemented, you only need to add a handler to the window.onerror event, and you will see some warning messages on the console, prompting you to introduce something that should not be introduced. Outsite scripts. Under secure browsers, loading external scripts will work without error unless you specify the crossorigin attribute.
crossorgin is not a magic security trick, all it does is make the browser enable normal CORS access checks, make an OPTIONS request and check the Access-Control header.
html Script tag and innerHTML:
通过 DOM 动态添加到页面上的 script 标签会被浏览器执行：
var myScript = document.createElement('script');
myScript.textContent = 'alert("?")';
document.head.appendChild(myScript);通过 innerHTML 动态添加到页面上的 script 标签则不会被执行：
document.head.innerHTML += '<script>alert("?")</script>';为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 script 标签在 Chrome 代码检查器中显示但不实际执行？”
【相关推荐】
The above is the detailed content of What is the role of script tag in HTML? What is the usage of type attribute in script tag?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
