如何实现页面包含

项目中，习惯把多个页面中完全一样的内容，单独提取出来作为一个独立的文件（如header.html、footer.html），凡是需要此文件的页面，引入该页面即可。页面包含可以采用多种方案：

1、利用Web服务器的SSI命令：客户端请求一个页面，服务器一次返回多个页面 — 需要修改Web服务器配置文件。

2、使用服务器端动态语言提供的页面包含函数：如PHP

include(‘header.php’);

...echo’主体’；

include(‘footer.php’);

客户端请求一个页面，服务器返回多个PHP页面组合后的一个页面、

3、在客户端使用AJAX技术：先加载一个页面的主体内容，加载完成后。再去请求header.html、footer.html放到空容器中

<div id=”header”></div>

<main>xxxxxxxx</main>

<div id=”footer”></div>

$.ready(function(){

$(‘#header’).load(‘header.html’);

$(‘#footer’).load(‘footer.html’);

})

提示：AngularJS中ng模块提供了一个指令：ngInclude，已经实现了方法3

<div ng-include=” ’tpl/header.html’ “></div>