1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 在JavaScript文件中引用另一个JavaScript文件

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

时间:2024-07-11 08:58:43

相关推荐

在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><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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。