script标签

Posted 2021-09-07 come on同

script标签

script元素

<script>是将javascript插入html的主要方法。

script中的8个属性：

属性	描述
async	异步执行脚本（只对外部脚本有效），立即下载脚本，不妨碍对页面的其他操作
charset	使用src属性指定的代码字符集，使用极少，浏览器一般不在乎它的值
crossorigin	配置跨域资源请求设置，默认不使用 CORS。crossorigin=“anonymous” 配置文件请求不必设置凭据标志。 crossorigin=“use-credentials” 设置凭据标志，意味着出站请求会包括凭据。
defer	表示文档解析和显示完成后再执行脚本是没有问题的，只对外部脚本文件才有效。
intergrity	验证接收到的资源签名和这个属性指定的签名是否匹配，不匹配的话，页面报错，并且脚本不执行。这个属性用于保证内容分发网络不会提供恶意内容。
language	废弃
src	包含要执行的外部文件
type	表示代码块中的语言类型，这个值始终是text/javascript

script应用

使用script的注意点：

1. 嵌入行内js代码时，直接将代码放在<script>标签内就行

   <script> 
     function sayHi(){
       console.log('hi') 
     } 
   </script>

2. 在使用script的时候，要注意代码中不能出现字符串</script>因为浏览器在解析行内脚本的时候，会将其解析成结束标签：

   <script>
      function sayHello(){
         console.log("</script>")
      }
   </script> 

如上图代码所示，浏览器在解析时会将其当成结束标签来解析，应该用转义标签来避免这个问题：

   <script>
     function sayHello(){
       console.log("<\\/script>")
     }
   </script>   

这样修改后，代码就可以被浏览器完全解析，并且不会出现错误。

3. 要包含外部文件中的javascript，必须要使用src属性。这个属性的值是一个URL，指向包含javascript的文件。比如：

   <srcipt src="demo.js"></script>

如上就是页面中加载了一个名为demo.js的外部文件。如果使用了src属性，不应该再在<script></script>内使写其他的javascript代码了。如果写了，只能下载执行脚本文件，忽略行内代码。

<script src="http://www.lll.com/demo.js"></script>

4.浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应的资源，假定是一个javascript文件。这个初始的请求不受浏览器同源策略限制，但返回并执行的javascript则受限制。这个请求也受父页面HTTP/HTTPS协议的限制。
5. 在引用别人服务器上边的js文件时要小心，因为有些程序员会随时更换这个文件。script标签中的integrity属性是防范这个问题的武器，但这个属性不是所有属性都支持。
6. 在没有使用defer和async属性时，script在页面出现的顺序依次解释它们。