当前位置：首页 > 行业动态 > 正文

html 如何外链js

admin
行业动态
2024-04-05
4449

在HTML中，我们可以通过多种方式外链JavaScript文件，以下是一些常见的方法：

html 如何外链js 第1张

1、使用<script>标签的src属性

这是最常见的方法，也是最简单的方法，你只需要在<script>标签中设置src属性为你的JavaScript文件的URL，然后将这个<script>标签插入到你的HTML文件中。

<!DOCTYPE html>
<html>
<head>
    <title>外链JavaScript示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <!外链JavaScript文件 >
    <script src="myScript.js"></script>
</body>
</html>

在这个例子中，myScript.js是一个外部的JavaScript文件，它被链接到了HTML文件中，当浏览器加载这个HTML文件时，它也会加载并执行myScript.js文件中的JavaScript代码。

2、使用<script>标签的async和defer属性

async和defer属性可以让你控制JavaScript文件的加载和执行方式。

async属性表示脚本在下载过程中不会阻塞页面的渲染，一旦脚本下载完成，它就会立即执行，不管此时页面是否已经渲染完成。

<!DOCTYPE html>
<html>
<head>
    <title>外链JavaScript示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <!异步加载并执行JavaScript文件 >
    <script async src="myScript.js"></script>
</body>
</html>

defer属性表示脚本在下载过程中会阻塞页面的渲染，但是在文档解析完成后，它会按照它们在文档中出现的顺序执行。

<!DOCTYPE html>
<html>
<head>
    <title>外链JavaScript示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <!延迟加载并执行JavaScript文件 >
    <script defer src="myScript.js"></script>
</body>
</html>

3、使用事件监听器和动态创建<script>标签

如果你需要在页面加载完成后再加载和执行JavaScript文件，你可以使用事件监听器和动态创建<script>标签的方法。

<!DOCTYPE html>
<html>
<head>
    <title>外链JavaScript示例</title>
    <script>
        // 当文档加载完成后，动态创建并加载JavaScript文件
        window.onload = function() {
            var script = document.createElement('script');
            script.src = 'myScript.js';
            document.body.appendChild(script);
        };
    </script>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个例子中，当文档加载完成后，会动态创建一个<script>标签，并将其src属性设置为你的JavaScript文件的URL，然后将其添加到文档的body中，这样，你的JavaScript文件就会被加载和执行。