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/[email protected]/webcomponents-bundle.js](https://unpkg.com/@webcomponents/[email protected]/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的后缀名,具体可以看这篇文章在浏览器中使用javascript module
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,如图:
运行结果:
