HTML 导入在 Chrome 中不起作用

标签 html google-chrome polymer

根据这个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)被跨源资源共享策略阻止。

W3C spec on HTML Imports :

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/

相关文章:

javascript - 如何使用 JavaScript 向 HTML 文本添加新行?

google-chrome - Chrome 扩展 : How to use inline installation for multiple verified sites with one Extension

javascript - 是否可以在 Google Chrome 扩展中使用(或包含)node.js 框架?

html - 电子邮件设计中的多行文本突出显示 css

php - 使用 foreach 循环遍历 MySQL 中的所有行

google-chrome - 带有 iframe 的 Google Chrome 全页屏幕截图

google-chrome - Fetch As Google 显示我的网站不像 Chrome 那样

polymer - 如何将 Polymer 的 Platinum-sw-* 配置为不缓存一个 URL 路径?

twitter-bootstrap - Bootstrap.js 在 Polymer 组件中不起作用

html - 为响应窗口禁用 Bootstrap dl-horizo​​ntal 类