根据这个article , 可以在最新版本的 Chrome(可能是目前唯一启用 HTML 导入的浏览器)以外的浏览器上通过 Polymer 使用 HTML 导入。但是,使用以下 html,改编自同一篇文章:
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML Imports</title>
<!-- Pull in our blog post example -->
<link rel="import" href="2.html">
</head>
<body>
<p>Hello World!</p>
<script src="platform.js"></script>
<script>
window.addEventListener('HTMLImportsLoaded', function() {
var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#test');
document.body.appendChild(document.importNode(content, true));
});
</script>
</body>
</html>
2.html
<div id="test">
<h1>Here is the Import </h1>
</div>
我得到了 following result .
看来 <div id="test">
在 Firefox 中成功导入,但在 Chrome 中未成功导入。请注意,我尝试在 about:flags 中启用实验性 Web 平台功能。
有没有办法让它也适用于 Chrome?我正在寻找任何能让我在最新版本的 Firefox 和 Chrome 中使用基本导入的解决方案。 (我的项目要到 2016 年初才会上线,所以我希望届时能够在每个平台上提供标准支持,但与此同时有一个解决方法会很好。)谢谢。
最佳答案
您似乎正在使用 file:
协议(protocol),该协议(protocol)被跨源资源共享策略阻止。
All imports linked from documents that is the master document or the one in the import map must be loaded using potentially CORS-enabled fetch with mode set to "Anonymous".
您可以尝试在本地主机上运行服务器,这会有所帮助。
关于HTML 导入在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27222306/