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

最新推荐文章于 2024-06-09 19:30:00 发布

sunddy_x

最新推荐文章于 2024-06-09 19:30:00 发布

阅读量8.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/sunddy_x/article/details/118160725

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

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

方法

1. document.write

目录结构

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')

效果如图
在这里插入图片描述

2. import

对应的index.html

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

对应的main.js

import './extra.js'

对应的extra.js

console.log('extra')

运行后发现报错
在这里插入图片描述
错误解释是不能在模块外使用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>

运行后出现新的错误
在这里插入图片描述
由图可知发生了跨域错误，跨域请求只支持以下协议：http，https，data，chrome，chrome-extension，chrome-untrusted，但是我们的协议是file，因此我们需要运行一个本地服务器，这里我使用的是vscode的LiveServe插件

右键启动服务
在这里插入图片描述
运行效果如下

127.0.0.1就是服务器地址，端口号为5500

sunddy_x

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
在JavaScript文件中引用另一个JavaScript文件

前言写了一个全局main.js，其中又需要引用其他第三方js文件，但是不希望在每个页面引用main.js之前再引用一遍第三方js文件，那就把第三方js文件放到main.js中引用。方法1. document.write目录结构index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head>
复制链接

扫一扫

专栏目录