【JavaScript】script 标签的使用

script 标签

script 标签之间共享顶层对象。

<script>
    var a = 1;
script>

<script>
    console.log(a); // 1
script>

但是全局变量作用域的提升机制在这些边界中不适用:

<script>
    foo();
script>

<script>
    function foo() {
        console.log('foo');
    }
script>

但是下面的两段代码则没问题:

<script>
    foo();
    function foo() {
        console.log('foo');
    }
script>
<script>
    function foo() {
        console.log('foo');
    }
script>

<script>
    foo();
script>

如果 script 中的代码(无论是内联代码还是外部代码)发生错误,它会像独立的 JS 程序那样停止,但是后续的 script 中的代码依然会接着运行,不会受影响。


内联代码和外部文件中的代码之间有一个区别,即在内联代码中不可以出现 字符串,一旦出现即被视为代码块结束。因此对于下面这样的代码需要非常小心:

<script>
    var code = "<script>alert('Hello World')script>";
script>

上述代码看似没什么问题,但是字符串常量中的 将会被当作结束标签来处理,因此会导致错误。

常用的变通方法是:

' + 'script>';

使用转义字符 \ 也可:

<script>
    function sayScript() {
        console.log('<\/script>'); // 使用转义字符
    }
script>

另外需要注意的一点是,我们是根据代码文件的字符集属性来解析外部文件中的代码,而内联代码则使用其所在页面文件的字符集。

内联代码的 script 标签没有 charset 属性。



script 标签的属性

  1. src:可选。指定外部脚本文件。
  2. async:可选。表示异步加载脚本,加载完成后立即执行。只对外部脚本文件有效。
  3. defer:可选。表示异步加载脚本,等到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  4. crossorigin:可选。配置相关请求的 CORS(跨源资源共享)设置。默认不使用 CORS。crossorigin="anonymous" 表示文件请求不会设置凭据标志。crossorigin="use-credentials" 表示文件请求会设置凭据标志,意味着出站请求会包含凭据。
  5. integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI,Subresource Integrity)。如果接收到的资源的签名与这个属性指定的签名不匹配,则页面会报错,脚本不会执行。这个属性可以用于确保内容分发网络(CDN, Content Delivery Network)不会提供恶意内容。



script 标签的使用

使用了 src 属性的 标签中包含其他 JS 代码。如果两者都提供的话,则浏览器只会下载并执行外部脚本文件,从而忽略行内代码。


元素很像,

你可能感兴趣的:(JavaScript,笔记,javascript,前端,开发语言)