网页公共部分引入的几种方法简述
2014-07-06 20:32
357 查看
开发过程中会遇到这样的问题,一个网站的头部尾部固定,几乎出现在每个页面之中,也或许其中的某些模块反复使用,这时为了做到一次编写,多处使用的功效,我们就会想要去将这部分的代码放在单独的文件中,然后引用这个文件。引用文件在php、asp.net文件中include进去就可以了,那么如果是在html静态文件中有没有什么办法呢?
经过多番查找,发现方法还是挺多的,下面就来一一列举一下:
PHP/ASP.NET——include
iFrame:
这个自是不用多说的,最简单的方式了:
iFrame的方式缺点在于页面结构的杂乱、不易被搜索引擎搜索、导航链接等等问题,因此,大家普遍寻找其他的替代方法。
Javascript/jQuery:
首先想到的自然是js来处理了,利用js(jQuery)或ajax从服务器上取回需要的公共页面然后插入页面。
SSI:
SSI(Server SideInc lude),通常称为服务器端嵌入,是一种类似于ASP的基于服务器的网页制作技术。html页面的命令,需由服务器在提供页面的时候进行处理,该方法需要有服务器的支持才能使用。
配置方式如下:
1、打开apache安装目录,找到httpd.conf文件,用编辑器打开,找到如下两行,将前面的#号去掉。
Clam:
Clam开发出来的功能之一就是构建模块化的前端项目,其余的功能更是强大,暂且不提,详见:https://www.npmjs.org/package/clam。
Clam的使用首先需要安装nodejs,然后使用npm安装:
安装好之后,创建项目什么的见上述链接,都有详细说明,这里只提一下如何使用它来引入页面:
在需要引入其他页面的地方,仅仅加一句:
开发过程中会遇到这样的问题,一个网站的头部尾部固定,几乎出现在每个页面之中,也或许其中的某些模块反复使用,这时为了做到一次编写,多处使用的功效,我们就会想要去将这部分的代码放在单独的文件中,然后引用这个文件。引用文件在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 .shtml2、找到"Options Indexes FollowSymLinks",在后面加上Includes
Options Indexes FollowSymLinks Includes如上即配置好了。使用格式如下:
<!--#include "test.html"-->
Clam:
Clam开发出来的功能之一就是构建模块化的前端项目,其余的功能更是强大,暂且不提,详见:https://www.npmjs.org/package/clam。
Clam的使用首先需要安装nodejs,然后使用npm安装:
npm -g install clam
安装好之后,创建项目什么的见上述链接,都有详细说明,这里只提一下如何使用它来引入页面:
在需要引入其他页面的地方,仅仅加一句:
<!--#include "test.html"-->格式和asp、SSI方式一样。这种方式的好处之一是不用再去配置,且使用的是http服务器,不用为了使用公共部分代码而不得不用php等等技术。
相关文章推荐
- 网页引入css样式的几种方法
- 网页中引入样式表的几种方法
- 引入公共html页面的几种方法
- thinkphp5引入公共部分header、footer的方法详解
- CSS隐藏网页文字的几种常用方法
- 在HTML文件引入其它HTML文件的几种方法
- JavaScript获取网页中HTML元素的几种方法分析
- JavaScript获取网页中HTML元素的几种方法分析
- 几种在网页中插入CSS样式表的方法
- 【转】JavaScript获取网页中HTML元素的几种方法分析。
- 部分公共方法
- Javascript实现把网页中table的内容导入到excel中的几种方法
- 在网页中页中加入CSS有几种方法(转贴)
- 在html文件引入其它html文件的几种方法
- 简述c#中对字符串进行分割的几种方法
- 用户控件(.ascx)与网页间(.aspx)如何传值的几种方法
- c#获取网页源代码的几种方法
- c#获取网页源代码的几种方法
- JS获取网页中HTML元素的几种方法
- [收藏]JS获取网页中HTML元素的几种方法分析