html导入不起作用答案

【问题标题】：html import not workinghtml导入不起作用
【发布时间】：2017-09-25 09:26:13
【问题描述】：

我一直在为我的公司编写一个新的 Intranet，并希望能够将大量文件导入到同一页面上，以便仍然可以轻松编辑信息。但是，当我尝试直接打开文件而不是通过 Visual Studios 打开文件时，文件不会导入。

我写这篇文章的方式有问题还是因为其他原因它不起作用？

<link rel="import" href="/Example.html">
<script>
    var link = document.querySelector('link[rel="import"][href="/Example.html"]');
    var content = link.import;
    var el = content.querySelector('#Example');
    document.body.appendChild(el.cloneNode(true));
</script>

编辑：对于遇到与 html 导入相同问题的任何人，经过进一步研究，我建议使用 MVC 框架，因为它具有更简单有效的导入方法。

【问题讨论】：

caniuse.com/#search=import ...?

标签： javascript html visual-studio import html-imports

【解决方案1】：

您可以简单地使用 jQuery 将另一个 HTML 页面包含到您的页面中。 <link> 标签用于将外部 CSS 样式表链接到您的 HTML 文档。

假设你的 HTML 页面被命名为example.html，然后添加这个代码：

<html> 
  <head> 
    <script src="/path/to/your/jquery.js"></script> 
    <script> 
    $(function(){
      $("#includemyHTML").load("Example.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includemyHTML"></div>
  </body> 
</html>

【讨论】：

您正在加载错误的文件。 "假设你的 HTML 页面被命名为 demo.html", ".load("Example.html");" :)

【解决方案2】：

对于初学者，您应该知道浏览器对 HTML 导入的支持仍然非常有限。 Google Chrome 从版本 31 开始支持，但您仍需要手动启用该功能。要在 Chrome 中启用 HTML 导入，请转到 chrome://flags 并启用启用 HTML 导入标志。完成后，单击屏幕底部的立即重新启动按钮以重新启动支持 HTML 导入的 Chrome。

现在您的浏览器已全部设置完毕，让我们看看您如何在网页中使用导入。

HTML 导入使用元素来引用您希望导入的文件；这与包含样式表的方式类似。确保将 rel 属性设置为 import 以向浏览器指示应将引用的文件导入到文档中。

更多信息..转到link

【讨论】：

感谢您推荐此方法，但“启用 HTML 导入”不存在。我不确定，但认为这可能意味着 HTML Imports 现在是 chrome 原生的。

【解决方案3】：

大多数浏览器尚不支持 HTML 导入，只有 Chrome 从 36 版开始，Opera 从 23 版开始。

来源：http://caniuse.com/#feat=imports

【讨论】：

谢谢你告诉我，我现在已经更新了 chrome 并且它是最新的。但是，不幸的是，我仍然遇到同样的问题，即无法加载。
是的，你是对的，你需要在 chrome 设置中启用 HTML 导入。
我查看了 chrome://flags 和 chrome 设置，但找不到我需要启用的内容，您有可以用作指导的图片吗？

【解决方案4】：

自 Google Chrome 73 起已过时
此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。

使用替代方法

PHP 中的服务器端导入
客户端导入使用templating engines 或HTML preprocessors 或使用Task runners 如Gulp 或Grunt。

来源MDN

【讨论】：