Question

根据这个article，可以在除最新版Chrome之外的浏览器上使用HTML Imports via Polymer（可能是目前唯一支持HTML Imports的浏览器）。但是，使用以下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年初才会上线，所以我希望届时可以在每个平台上提供标准支持，但同时解决方法也很好。）谢谢。

Answer 1

您似乎正在使用file:协议，该协议被跨源资源共享策略阻止。

W3C spec on HTML Imports：

必须使用可能支持CORS的提取加载从主文档或导入地图中的文档链接的所有导入，模式设置为＆＃34; Anonymous＆＃34;。< / p>

您可以尝试在localhost上运行服务器，这会有所帮助。

HTML导入无法在Chrome中运行

1 个答案: