【问题标题】:Is there a way to import HTML into an HTML file?有没有办法将 HTML 导入 HTML 文件?
【发布时间】:2019-02-28 11:36:57
【问题描述】:

我已经尝试在这里和谷歌上寻找这个,但我还没有真正找到这个特定问题的答案,我不确定是否有什么 - 一个术语或我需要寻找的东西,所以如果这是一个常见问题,我深表歉意。

无论哪种方式,例如,假设我正在构建一个包含许多部分的网站,并且我希望这些部分是模块化的,因此每个部分都是它自己的 html 文件。所以基本上我可以在主 html 文件的任何地方包含这个小模块,或者我可以简单地将导航栏和页脚包含到其他 HTML 页面中,而无需重写代码行。

仅使用 HTML 是否可行?

【问题讨论】:

标签: html


【解决方案1】:

编辑: 一个值得探索的选项是object 标签。您可以在页面上包含另一个文件(任何类型)。

与下面的其他选项相比,这似乎是一个更合适的选项。

<object type="text/html" data="file.html"></object>

它的工作原理与 HTML5 导入类似。

object 标签是 HTML 4 的一部分,因此它是 supported,因为 IE6+、Firefox 2+、Chrome 1+ 等。


使用HTML5 Import。它确实实现它的支持/浏览器非常有限

<link href="extern.html" rel="import" />

除此之外,如果您想从客户端导入另一个文件,则至少需要 Javascript。根据您的技术,有多种选择可以从后端执行。

Pete 强调的另一种可能性是使用 iframes(尽管我不想使用它们)。


如您在here 上所见,强烈建议不要使用 HTML5 导入。

以下是从上述链接中摘录的一些注释:

  • MS Edge 状态:考虑中

  • Chrome 状态:已弃用

  • Firefox 状态:未计划

  • WebKit 状态:未考虑

  • Firefox 没有计划支持 HTML 导入,但目前可以通过 about:config 中的“dom.webcomponents.enabled”首选项启用它

【讨论】:

  • “非常有限”是轻描淡写:自 Google Chrome 73 起已过时
  • @JonathonReinhart 在答案末尾添加了更多“沮丧”。我同意这是一种轻描淡写的说法——不过我想不出更合适的措辞。
  • @Adriani6 谢谢!我记得几年前在 youtube 上看过一些使用这种方法来保持模块化的教程,我相当肯定他们使用了服务器端语言来完成它。只是好奇地想看看这是否可以用最低限度来实现。这回答了这个问题。
  • @jollyjwhiskers 查看编辑。这可能是您正在寻找的解决方案!
【解决方案2】:

不,这不能用纯 HTML 完成。

替代方案:

  • 运行像 PHP 这样的服务器端代码
  • 使用静态网站生成器构建您的页面
  • 在页面上使用 javascript 引入通用组件(尽管当您试图消除页面之间的代码重复时,这并不适用)

【讨论】:

    【解决方案3】:

    你不能用纯 HTML 来做到这一点,但你可以在你的 html 文件中的 script 标签中使用 javascript,就像这个 jQuery 示例一样

    <html>
       <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
          <script>
             $(document).ready(function(){
                $('#header').load("header.html");
                $('#footer').load("footer.html");
             });
          </script>
       </head>
       <body>
          <div id="header"></div>
          your content........
          <div id="footer"></div>
       </body>
    </html>
    

    【讨论】:

      【解决方案4】:

      您可以做的是创建一个您编写 html 代码的 php 文件,然后在 index.php 中调用该文件。例如:

      Tis 是您的索引 .php,而文件 footer.php 是另一个包含您想要的 html 的文件。

      <html>
      <body> 
      <h1>Welcome to my home page!</h1>
      <p>Some text.</p>
      <?php include 'footer.php';?>
      </body>
      </html>
      

      或者

      你也可以创建一个 iframe,给它一个特定的大小,在你的 html 文件和 src 中,你可以参考你想要的 html 文件

      <iframe src="../../something.html"></iframe>
      

      【讨论】:

        猜你喜欢
        • 2021-10-23
        • 1970-01-01
        • 2019-09-07
        • 2015-08-24
        • 2017-08-01
        • 2020-09-23
        • 1970-01-01
        • 2021-12-19
        • 2014-12-03
        相关资源
        最近更新 更多