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

Question

我有一个有近30个html的应用程序,他们共享一些常见的代码ifi做了任何更改我需要在每个页面上更改它.下面是我在所有页面上使用的代码段.

<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,您可以使用服务器端包含 ^{[ Wikipedia ]}来实现非常简单和干净.SSI看起来像HTML评论:

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

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

Options +Includes

阅读上面的doc链接以获取更多信息.

客户端包括

您的问题实际上指定在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

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

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