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，可以使用Server side include ^[Wikipedia]进行非常简单和干净的操作。 SSI看起来像HTML评论：

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

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

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。这是一个例子

<强> 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

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

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

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。

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

4 个答案:

PHP