时间戳

首页 > 解决方案 > html 像布局引擎一样导入

javascript - html 像布局引擎一样导入

问题描述

在 php 上，实现看起来很简单，假设我们有文件：header.html、body.html。然后我们的代码 index.php 将如下所示：

<html>
  <body>
  <? = require(' header.html ')?>
    <div class = "main">
      <? = require(' body.html ')?>
    </div>
  </body>
</html>

有可能做这样的事情吗？

<html>   
  <body>
    <link rel = "import" href = "header.html">
    <div class = "main">
      <link rel = "import" href = "body.html">
    </div>

   <script>
      / * A magic js function that replaces <link rel = "import"> with the content of the html document * /
   </script>
</body>
</html>

PS 我知道这将适用于数量非常有限的浏览器。

标签： javascript

解决方案

有许多 JavaScript 模板引擎可用。 Handlebars.js和Mustache.js使用大括号表示变量。 Jade/Pug完全不用括号。

您可以构建自己的模板库并使用您想要的任何格式。它适用的浏览器范围取决于您愿意支持多远的历史。

PHP 允许您导入静态页眉和页脚，而使用 JavaScript，您更有可能拥有一个内置页眉和页脚的静态模板，并动态导入正文内容。我们在 Google 图片搜索和 Pinterest 等网站上经常看到延迟加载内容。

推荐阅读