开发过程中会遇到这样的问题,一个网站的头部尾部固定,几乎出现在每个页面之中,也或许其中的某些模块反复使用,这时为了做到一次编写,多处使用的功效,我们就会想要去将这部分的代码放在单独的文件中,然后引用这个文件。引用文件在php、asp.net文件中include进去就可以了,那么如果是在html静态文件中有没有什么办法呢?
经过多番查找,发现方法还是挺多的,下面就来一一列举一下:
PHP/ASP.NET——include
- <strong>include 'test.html';
- require 'test.html';</strong>
- <strong><!--#include file='filename'--></strong>
iFrame:
这个自是不用多说的,最简单的方式了:
- <iframe src="http://baidu.com/" width=""; height="" frameborder="0" scrolling="no" ></iframe>
iFrame的方式缺点在于页面结构的杂乱、不易被搜索引擎搜索、导航链接等等问题,因此,大家普遍寻找其他的替代方法。
Javascript/jQuery:
首先想到的自然是js来处理了,利用js(jQuery)或ajax从服务器上取回需要的公共页面然后插入页面。
- $("#myDiv").load(“url”,params)
- var test={
- "type1":"paramer1","type2":"paramer2"};
- $.ajax({
- url:'myTest.php',
- type:'post',
- dataType:'html',
- data:parames,
- error: function(){alert('error');},
- success:function(data){
- $("#myDiv").html(data);
- }
- });
SSI:
SSI(Server SideInc lude),通常称为
服务器端嵌入
,是一种类似于
ASP
的基于服务器的网页制作技术。
html页面的命令,需由服务器在提供页面的时候进行处理,该方法需要有服务器的支持才能使用。
配置方式如下:
1、打开apache安装目录,找到
httpd.conf文件,用编辑器打开,找到如下两行,将前面的#号去掉。
- #AddType text/html .shtml
- #AddOutPutFilter INCLUDES .shtml
- Options Indexes FollowSymLinks Includes
- <!--#include "test.html"-->
Clam:
Clam的使用首先需要安装nodejs,然后使用npm安装:
- npm -g install clam
安装好之后,创建项目什么的见上述链接,都有详细说明,这里只提一下如何使用它来引入页面:
在需要引入其他页面的地方,仅仅加一句:
- <!--#include "test.html"-->