HTML Google Chrome 仍然支持导入吗?
Is HTML Import still supported in Google Chrome?
根据http://blog.teamtreehouse.com/introduction-html-imports
To enable HTML imports in Chrome, go to chrome://flags and enable the Enable HTML Imports flag. Once you’re done, click the Relaunch Now button at the bottom of the screen to restart Chrome with support for HTML imports.
但是我在最新版本的 Google Chrome flags
中找不到它
HTML 导入在 Chrome, Opera and Android 中本地实现。
对于其他浏览器,您可以使用:
- webcomponentsjs polyfill,
- 或直接来自 HTML Imports.
的文件 html-imports.min.js
2019 年更新
HTML Imports won't be supported natively after Chrome 73. 然后你应该使用另一个解决方案:
- polyfill,
- 备用模块加载器,
- JS
import
结合 template literals,
- 直接下载
fetch()
。
2020 年更新
HTML 导入已明确删除。
我找到了另一种方法来做同样的事情。我把要导入的整个文件放在一个字符串中,
然后调用 document.write(theString) 。例如
//head.js
var s=
`<meta charset='UTF-8'>
<link rel="stylesheet" href="/Program/assets/css/main.css">
<script src="/Program/assets/js/my.js"></script>
<script src="/Program/libs/highlight/highlight.pack.js"></script>
<link rel='stylesheet' href='/Program/libs/highlight/androidstudio2.css'>
<script src='/Program/assets/js/jquery.3.4.1.js' ></script>
<script>
$('code').each(function() {
var that = $(this);
var html = that.html().trim();
that.empty();
that.text(html);
});
hljs.initHighlightingOnLoad();
</script>
`;
document.write(s);
然后我调用这个新创建的脚本文件而不是主文件:
<script src="/Program/head.js"></script>
根据http://blog.teamtreehouse.com/introduction-html-imports
To enable HTML imports in Chrome, go to chrome://flags and enable the Enable HTML Imports flag. Once you’re done, click the Relaunch Now button at the bottom of the screen to restart Chrome with support for HTML imports.
但是我在最新版本的 Google Chrome flags
中找不到它HTML 导入在 Chrome, Opera and Android 中本地实现。
对于其他浏览器,您可以使用:
- webcomponentsjs polyfill,
- 或直接来自 HTML Imports. 的文件
html-imports.min.js
2019 年更新
HTML Imports won't be supported natively after Chrome 73. 然后你应该使用另一个解决方案:
- polyfill,
- 备用模块加载器,
- JS
import
结合 template literals, - 直接下载
fetch()
。
2020 年更新
HTML 导入已明确删除。
我找到了另一种方法来做同样的事情。我把要导入的整个文件放在一个字符串中, 然后调用 document.write(theString) 。例如
//head.js
var s=
`<meta charset='UTF-8'>
<link rel="stylesheet" href="/Program/assets/css/main.css">
<script src="/Program/assets/js/my.js"></script>
<script src="/Program/libs/highlight/highlight.pack.js"></script>
<link rel='stylesheet' href='/Program/libs/highlight/androidstudio2.css'>
<script src='/Program/assets/js/jquery.3.4.1.js' ></script>
<script>
$('code').each(function() {
var that = $(this);
var html = that.html().trim();
that.empty();
that.text(html);
});
hljs.initHighlightingOnLoad();
</script>
`;
document.write(s);
然后我调用这个新创建的脚本文件而不是主文件:
<script src="/Program/head.js"></script>