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导入，只支持版本36以后的Chrome和版本23以后的Opera。

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

Answer 2

您可以简单地使用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>

Answer 3

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

既然您已经设置了浏览器，那么让我们来看看您在网页中如何使用导入。

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

更多信息..转到此link

Answer 4

自Google Chrome 73以来已过时
此功能已过时。尽管它可能在某些浏览器中仍然可以使用，但不建议使用它，因为可以随时将其删除。尝试避免使用它。

使用其他方法

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

来源MDN

html导入无法正常工作

4 个答案: