14

我有一个包含近 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>

有什么解决方案可以让我将它保存在一个文件中并在我想要的任何地方重复使用它吗？

4

4 回答 4

17

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

PHP

当然首先想到的是如果你想使用 PHP，它的用法include()包括并评估外部文件或脚本中的代码。

您可以这样使用它：

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

笔记！请注意：您的容器文件必须是一个.php文件，才能从服务器评估此指令。您无需执行任何操作，只需更改文件扩展名即可。当然，还要确保您的服务器可以解析 PHP。

另外，请注意与 的区别include_once()，在这种情况下我不建议这样做。

SSI（服务器端包括）

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

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

笔记！您必须确保已mod_include在您的 Apache 服务器中安装并启用，并在您的httpd.confor.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>';

容器.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');
});
于 2013-04-05T11:43:40.517 回答
0

旧线程，但我自己遇到了这个要求。我的要求是在客户端使用纯 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);
    });
于 2020-08-08T08:24:10.463 回答
-1

如果您使用 php，则可以将该代码放在一个文件中并使用include 'filename.php';

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

于 2013-04-05T11:08:02.103 回答
-1

你已经得到了答案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。

于 2013-04-05T11:11:14.337 回答