在JavaScript文件中引用另一个JavaScript文件

落日映苍穹つ 2022-10-09 03:28 213阅读 0赞

## 前言 ##

写了一个全局main.js，其中又需要引用其他第三方js文件，但是不希望在每个页面引用main.js之前再引用一遍第三方js文件，那就把第三方js文件放到main.js中引用。

## 方法 ##

## 1. **document.write** ##

目录结构  
![目录结构][20210623193043289.png]  
index.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script src="./js/main.js"></script>
    	</body>
    </html>

main.js

document.write("<script src='./js/extra.js'></script>");

extra.js

console.log('extra')

效果如图  
![在这里插入图片描述][20210623193412243.png]

## 2. import ##

对应的index.html

对应的main.js

import './extra.js'

对应的extra.js

console.log('extra')

运行后发现报错  
![在这里插入图片描述][20210623193924172.png]  
错误解释是不能在模块外使用IMPORT语句，这里浏览器会默认将它当做模块导入，而script标签默认为type=“text/javascript”，需要改为type=“module”，修改后的index.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="module" src="./js/main.js"></script>
    	</body>
    </html>

运行后出现新的错误  
![在这里插入图片描述][20210623194549314.png]  
由图可知发生了跨域错误，跨域请求只支持以下协议：http，https，data，chrome，chrome-extension，chrome-untrusted，但是我们的协议是file，因此我们需要运行一个本地服务器，这里我使用的是vscode的LiveServe插件  
![LiveServe][]  
右键启动服务  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]  
运行效果如下  
![在这里插入图片描述][20210623195719853.png]  
127.0.0.1就是服务器地址，端口号为5500

[20210623193043289.png]: /images/20221005/390daa4dcdb24c259dc4320b41f56875.png
[20210623193412243.png]: /images/20221005/4e212061dd574f3686f283625a700298.png
[20210623193924172.png]: /images/20221005/d704f5398fdb43028f880bbabf87bcbd.png
[20210623194549314.png]: /images/20221005/19c36603ec994dce8b7610d69114a884.png
[LiveServe]: /images/20221005/1982f99a9437469cb8d16c37e9f650c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]: /images/20221005/c29a3259cab047be839dd3007d078a47.png
[20210623195719853.png]: /images/20221005/3542aacd30e8411e851a12b8ed82275c.png