HTML 导入在 Chrome 中不起作用答案

【问题标题】：HTML Import not working in ChromeHTML 导入在 Chrome 中不起作用
【发布时间】：2023-05-11 03:39:01
【问题描述】：

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

【问题讨论】：

这就是他们在这里的样子：w3.org/TR/html-imports/#link-type-import
嗯，请原谅我的评论，因为我通常为此使用 PHP :)

标签： html google-chrome polymer

【解决方案1】：

您使用的似乎是file: 协议，该协议已被跨域资源共享策略阻止。

W3C spec on HTML Imports:

从主文档或导入映射中的文档链接的所有导入必须使用可能启用 CORS 的提取加载，并将模式设置为“匿名”。

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

【讨论】：

刚刚检查过 - 它确实可以在线运行。我只使用了href="2.html"，为什么在本地不起作用？这些文件都在同一个文件夹中。
在这一点上，Chrome 与 Firefox 有不同的政策。我不知道具体的理由，但通常是安全问题。同样，如果您没有服务器，则无法通过 XMLHttpRequest 请求资源。
进一步澄清：如果我希望导入在 Chrome 中正确脱机执行，语法应该是什么？ href="2.html" 在链接到另一个页面时工作正常但在导入案例中失败的事实对我来说没有意义。
不，你不能。你必须有一个服务器。这是由于浏览器的安全策略。 href 适用于<a> 并不一定意味着它也适用于其他标签，使用file:// 协议。看看this article，它说 导入的 URL 称为导入位置。要从另一个域加载内容，导入位置需要启用 CORS。
更多关于W3C spec on HTML Imports。 从主文档或导入映射中的文档链接的所有导入必须使用可能启用 CORS 的提取并将模式设置为“匿名”加载。跨度>