在html中使用import遇到的问题

最新推荐文章于 2024-05-06 17:11:44 发布

麦兜:)

最新推荐文章于 2024-05-06 17:11:44 发布

阅读量1.4w

点赞数 3

分类专栏：前端开发文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/qq_40544291/article/details/106380716

版权

前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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的后缀名,具体可以看这篇文章在浏览器中使用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,如图:
在这里插入图片描述
运行结果:

麦兜:)

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
在html中使用import遇到的问题

1.目前大部分浏览器已经原生支持HTML imports了,浏览器支持性如图:2.可根据如下代码判断浏览器支不支持HTML imports// main.htmlfunction supportImport() { return 'import' in document.createElement('link');}if (supportImport()) { console.log('浏览器支持import特性');} else { console.log('浏览器不支持im
复制链接

扫一扫

专栏目录