javascript - 如何使用 javascript 或 jQuery 处理多个 HTML 中的公共(public)代码

Question

我有一个包含将近 30 个 html 的应用程序，它们共享一些公共(public)代码，如果我对这些代码进行了任何更改，我需要在每个页面上对其进行更改。下面是我在所有页面上使用的一段代码。

<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，您可以使用 Server side include ^{[ Wikipedia ]}。 SSI 看起来像 HTML 注释:

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

注意!您必须确保拥有 mod_include 在您的 Apache 服务器中安装并启用，并在您的 httpd.conf 中添加以下指令或 .htaccess文件:

Options +Includes

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

客户端包含

---

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

如果有可能，我会推荐服务器端解决方案来解决您的问题。

IFrame 元素

---

<iframe> 元素在页面的单独区域中包含来自外部文件的内容。你可以像这样使用它:

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

对象元素

---

<object> 元素与 <iframe> 做类似的事情，但是虽然后者更多地被设计为沙箱应用程序的一种方式，但前者感觉更集成到您的页面中。用法如下:

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

Javascript 插入

---

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

外部.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()将加载的元素直接注入(inject)到 DOM 中，并且您还可以准确指定要加载的部分，这非常好，尤其是当您希望将所有包含内容存储在一个外部 HTML 文件中时。

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