在html中使用import遇到的问题
1.目前大部分浏览器已经原生支持HTML imports了,浏览器支持性如图:
2.可根据如下代码判断浏览器支不支持HTML imports
// main.html
function supportImport() {
return import in document.createElement(link);
}
if (supportImport()) {
console.log(浏览器支持import特性);
} else {
console.log(浏览器不支持import特性);
// 引入polyfill
var e = document.createElement(script);
e.src = [https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js](https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js);
document.body.appendChild(e);
}
遇到的问题
3.因为直接打开是file协议导致的跨域问题
问题如图: 为什么? 不会引起跨域的引入外部文件的就link标签,img标签,script标签,除开这三个,只要不符合同源策略(协议,域名,端口)就会引发跨域问题
解决方法: 通过搭建本地一个服务器去进行资源的问题来解决跨域问题 例如: 1.node 打开 2.phpStydy 打开
4.js加载标志
问题如图: 为什么? type=“module”的加载方式默认使用 defer的加载方式。
解决方法: 在web应用中，script标签的type属性设置为module，这样浏览器就会把引入的脚本识别为JS module,并且import的时候必须带上.js的后缀名,具体可以看这篇文章
5.具体测试代码
html代码:
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module">
import {
obj } from ./export;
obj.click();
console.log(obj.name);
</script>
</body>
</html>
js代码:
// export.js
let obj = {
click:function () {
console.log("click me")
},
name:jane
};
export {
obj}
部署的环境是在phpStydy,如图: 运行结果:
上一篇：
IDEA上Java项目控制台中文乱码