前端实现页面公共头部 / 尾部统一加载方法

1.使用shtml格式文件实现页面嵌套（加载速度快，但是需要修改配置文件）

html：

< body>

<!--#include virtual = "common/header.html" -->

</ body>

注意：后台配置文件中需加入相关声明：

ssi on;

ssi_silent_errors on;

ssi_types text/shtml;

如：nginx----

ssi on;

ssi_silent_errors on;

ssi_types text/shtml;

server {

listen 80;

server_name beyondscreen.com;

root E:/phpStudy/WWW/AAAbyondscreem;

index index.html index.htm index.shtml index.php;

location / {

root E:/phpStudy/WWW/AAAbyondscreem;

index index.html index.htm index.shtml index.php;

 

}

location ~ .php$ {

root E:/phpStudy/WWW/AAAbyondscreem;

fastcgi_pass 127.0.0.1:9000;

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

include fastcgi_params;

}

}

2.使用h5新增的embed标签；

<embed type="text/html" src="header.html" />

3.用 JavaScript 加载內容；（适合内存较小页面）

html：

<div id="header"></div>

<div id="footer"></div>

javascript：

$("#header").load("header.html");

$("#footer").load("footer.html");