如何使用 javascript 或 jQuery 处理多个 HTML 中的通用代码

Question

我有一个应用程序，其中有近 30 个 html，它们共享一些通用代码，如果我对其进行任何更改，我需要在每个页面上更改它。下面是我在所有页面上使用的一段代码。

<div>
  <ul>
    <li class="current"><a href=".html" ></a></li>
    <li><a href=".html"></a></li>
    <li><a href=".html"></a></li>
    <li><a href=".html"></a></li>
  </ul>
 </div>

是否有任何解决方案可以将其保存在单个文件中并在我想要的任何地方重复使用？

Answer 1

有多种方法可以实现这种包含，以使代码更易于维护。

PHP

---

当然，如果您想使用 PHP，首先想到的是使用

include()

，它包含并评估外部文件或脚本中的代码。

您可以这样使用它：

<?php include('path/to/file.html'); ?>

注意！ 请注意：您的容器文件必须是

.php

文件，以便从服务器评估此指令。只需更改文件扩展名即可实现此目的。当然，还要确保您的服务器可以解析 PHP。

另外，请注意与

include_once()

的区别，在这种情况下我不推荐这样做。

SSI（包括服务器端）

---

如果您不想使用 PHP，您可以使用 服务器端 include^[Wikipedia] 来非常简单和干净地做到这一点。 SSI 看起来像 HTML 注释：

<!--#include virtual="your.html" -->

注意！ 您必须确保在 Apache 服务器中安装并启用了

mod_include

，并在

httpd.conf

或

.htaccess

文件中添加以下指令：

Options +Includes

阅读上面的文档链接以获取更多信息。

客户端包括

---

您的问题实际上指定在 JS 或 jQuery 中执行此操作。不确定它是否是因为您不知道服务器端选项，或者您是否真的想要客户端选项。无论如何，也有一些客户端解决方案。

考虑到可能性，我会推荐服务器端解决您的问题。

IFrame 元素

---

<iframe>

元素包含页面中单独区域中外部文件的内容。你可以像这样使用它：

<iframe src="your.html" width="x" height="y"><p>Fallback text</p></iframe>

对象元素

---

<object>

元素与

<iframe>

执行类似的操作，但后者更多地被设计为 sandbox 应用程序的手段，而前者感觉更能集成到页面中。使用方法如下：

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

Javascript 插入

---

将代码转换为Javascript文件并指示文件将内容插入到DOM中。这是一个例子

external.js

var element = '<div>
                   <ul>
                     <li class="current"><a href=".html" ></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                   </ul>
               </div>';

container.html

<script type="text/javascript" src="external.js"></script>
<script>
     document.getElementById('#containing-element').innerHTML(element);
</script>

AJAX

---

jQuery可以帮助你轻松处理一些AJAX调用。您可以使用

jQuery.get()

或

jQuery.load()

。我建议您使用后者，因为

load()

将加载的元素直接注入到 DOM 中，并且您可以准确指定要加载的部分，这非常漂亮，特别是如果您想将所有包含内容存储在一个外部 HTML 中文件。

jQuery(document).ready(function ($){
    $('#containing-element').load('your.html');
});

Answer 2

旧线程，但我自己也遇到过这个要求。我的要求是在客户端使用纯 JavaScript 来完成此操作。一种情况，即只有一个 html (appHeader.html) 作为公共代码。

在每个必需的页面中，定义一个包含 id="head-container" 的 div 并在 body/window onload 事件中包含

    await fetch("./appHeader.html")
    .then(response => response.text())
    .then((html) => {
        document.getElementById("head-container").insertAdjacentHTML("afterbegin", html);
    });

Answer 3

古老的帖子，但我认为我可能有一个可行的最佳情况解决方案：

1. 使用 IIFE（立即调用函数表达式）创建包含常用数据的 JS 文件，例如： 外部文件.js：

(function IIFE() {
document.getElementById("sample").innerHTML = '<div><ul><li class="current"><a href=".html"></a></li><li><a href=".html"></a></li><li><a href=".html"></a></li><li><a href=".html></a></li></ul></div>';
})();

2. 在页面头部链接外部文件：

   <script src="external.js" defer></script>

3. 将 div（或其他标签）添加到 HTML：

   <div id="sample"></div>

4. 将

   <script>

   和

   <div>

   标签添加到每个页面。

这是我能想到的仅使用 HTML、CSS 和 JS 来模拟服务器端包含的最佳解决方案。为什么要这样？

• IIFE 会调用自身，因此您无需向其添加任何额外的步骤。
• 您可以编辑或调整“externalFile.js”的内容，并使更改发生在您的所有（相关）页面上。
• 在 JS 链接中添加“defer”可以让内容在页面加载时隐藏到位。
• 它非常灵活，因为您可以根据站点需要添加任意数量的元素选择器，所有这些都在同一个 JS 文件中。因此，您的页眉、导航、页脚、侧面板等都可以放置在一个 JS 文件中。

Answer 4

您已经得到了

PHP

的答案，但如果您不想或不能使用它，您可以将其保存在JS文件中：

test.js

document.write('<div>\n\
  <ul>\n\
    <li class="current"><a href=".html" ></a></li>\n\
    <li><a href=".html"></a></li>\n\
    <li><a href=".html"></a></li>\n\
    <li><a href=".html"></a></li>\n\
  </ul>\n\
 </div>');

并包括它：

<script type="text/javascript" src="test.js"></script>

但是当然更好的是

PHP

。

Answer 5

如果您使用 php，您可以将该代码放在一个文件中并使用

include 'filename.php';

http://php.net/manual/en/function.include.php