0

我一直在为我的公司编写一个新的 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 框架，因为它具有更简单有效的导入方法。

4

4 回答 4

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>
于 2017-09-25T09:38:16.187 回答
0

大多数浏览器还不支持 HTML 导入，只有 Chrome 版本 36 和 Opera 版本 23 之后。

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

于 2017-09-25T09:29:47.213 回答
0

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

现在你的浏览器已经设置好了，让我们看看你是如何在你的网页中使用导入的。

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

在此处输入图像描述

欲了解更多信息..转到此链接

于 2017-09-25T09:44:52.197 回答
0

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


使用替代方法

  • PHP 中的服务器端导入
  • templating engines使用orHTML preprocessors或使用Task runnerslike Gulpor的客户端导入Grunt。

来源MDN

于 2020-03-30T06:48:17.173 回答