如何处理多个HTML'；s使用javascript或jQuery

我有一个几乎有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>

---

是否有任何解决方案，我可以将其保存在一个文件中，并在任何需要的地方重用它？

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

包含'filename.php'

您已经得到了
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>');

document.write（'\n\
\n\
\n\
\n\
\n\
\n\
\n\
');

包括：

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



当然，使用
PHP
更好，有几种方法可以实现这一功能，从而使代码更易于维护

PHP

当然，首先想到的是，如果您想使用PHP，那么PHP的使用将包括并计算外部文件或脚本中的代码

您可以这样使用它：

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

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

Options +Includes

有关更多信息，请阅读上面的文档链接

客户端包括

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

考虑到这种可能性，我建议您使用服务器端解决方案

IFrame元素

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

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

旧线程，但我自己遇到了这个要求。我的要求是使用纯javascript在客户端完成。一次性的情况下，即只有一个html（appHeader.html）作为公共代码

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

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

考虑使用PHP
include
？这可以通过服务器端脚本轻松完成。你的服务器端脚本是什么？他正在请求通过javascript/jquery完成它。。。那么，所有的php答案是什么呢？我对php一无所知，我希望它使用jquery/javascript，你们能帮我使用它吗？@GonçaloVieira我想所有的php答案都与这是最好/最明显的解决方案这一事实有关。即使他正在请求js/jquery，他也可能不知道PHP包含了什么，并且可能会从他以前不知道的事情中受益。说到这里：android phonegap，我的答案包含两个使用纯javascript/jquery的解决方案，如果你发现有什么困难，请告诉我。你能使用像
moustache.js
这样的模板系统吗？如果你想让谷歌为你的页面编制索引，不要依赖js解决方案，但请谈谈应用程序，所以在这种情况下，它可能不会改变任何东西。考虑到它是一个应用程序，这段代码肯定不会被提供。。。但是，大多数人都没有读到这个问题……jQuery.load（）是将其加载到应用程序中的一种最合适的方法。
<object type="text/html" data="your.html"></object>

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>';

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

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

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