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,如圖:
運行結果:
