html 导入不工作

Question

我一直在为我的公司编写一个新的内部网，并希望能够将大量文件导入同一页面，以便仍然可以轻松编辑信息。但是，当我尝试直接打开文件而不是通过 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 框架，因为它具有更简单有效的导入方法。

Answer 1

大多数浏览器尚不支持 HTML 导入，只有 Chrome 自版本 36 和 Opera 自版本 23 以来。

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

Answer 2

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

假设您的 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>

Answer 3

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

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

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

有关更多信息..转到此 link

Answer 4

Obsolete since Google Chrome 73
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

使用替代方法

PHP
客户端导入使用 templating engines 或 HTML preprocessors 或使用 Task runners 如 Gulp 或 Grunt.

来源MDN

html 导入不工作

html import not working

javascript

html

visual-studio

import

html-imports