HTML导入无法在Chrome中使用 [英] HTML Import not working in Chrome
问题描述
根据此文章，
可以在最新版本的Chrome浏览器（这可能是目前唯一启用HTML导入的浏览器）之外的浏览器上使用通过Polymer导入的HTML导入。然而，使用以下html，改编自同一篇文章：
1.html
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< title>基本HTML导入< / title>
<！ - 拉入我们的博客帖子示例 - >
< link rel =importhref =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>以下是导入< / h1>
< / div>
我得到以下结果。
看来< div id =test> 会在Firefox中成功导入，但不会在Chrome中导入。请注意，我尝试在about：flags中启用实验性网络平台功能。
有什么方法可以让Chrome在Chrome中运行？我正在寻找任何解决方案，使我能够使用Firefox和Chrome的最新版本进行基本导入。 （我的项目直到2016年初才会上线，所以我希望标准支持将在每个平台上提供，但在此期间解决方法会很棒。）谢谢。
看来您使用的是 file：协议，该协议被跨源资源共享策略阻止。 / p>
关于HTML的W3C规范导入：
$ b
所有从主文档或导入地图中的文档链接的导入都必须使用可能启用CORS的提取模式设置为Anonymous。
您可以尝试运行服务器本地主机，这将有所帮助。
According to this article, it is possible to use HTML Imports via Polymer on browsers other than the latest version of Chrome (which might be the only one enabling HTML Imports at the moment). However, with the following html, adapted from the same article:
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>
I am getting the following result.
It appears that the <div id="test"> is imported successfully in Firefox but not in Chrome. Note that I tried to enable experimental Web Platform features in about:flags.
Is there any way to make it work for Chrome as well? I am looking for any solution that would enable me to use basic imports with the latest build of both Firefox and Chrome. (My project won't go live until early 2016, so I am hoping that standard support will be provided across every platform by then, but a workaround would be great in the meantime.) Thanks.
It seems you were using file: protocol, which is blocked by Cross-Origin Resource Sharing policy.
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".
You could try to run a server on localhost, that would help.
这篇关于HTML导入无法在Chrome中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
