html公共部分-header、footer部分引用

html公共部分-header、footer部分引用

主要介绍两种方式：

1、通过jq 以请求的方式加载

2、通过<!--#include virtual="header.html"-->的方式加载

两种方式各有优缺点，先说第一种。

用jq方式加载：

需要被引用的页面header.html里面只是头部的dom结构。不需要其他的标签

<div class="header">我是头部公用样式</div>

需要引用header的页面index.html

...//head省略
//引入jq
<script type="text/javascript" src="Content/Front/js/jquery-3.3.1.min.js"></script>
 

//需要被插入的地方
<div class="headerpage"></div>

//通过jq的load方法以ajax的方式去获取公用部分，填充到headrpage的位置
<script>
  $(function () {
    $(".headerpage").load("../header.html");
  });
</script>

这种方式有一个缺点就是，当页面本身加载就很慢的时候，这种方式，体验会非常不好，会出现，页面出现之后头部还没有出现。但是最终还是会出现的。当然在保证页面加载得很快的情况下还是挺不错的。

include方式引用

先准备好header.html公共页面。然后在需要引入的页面位置写入<!--#include virtual="header.html"-->。

...//省略
<!--#include virtual="header.html"-->
...//其他代码

同时需要注意include file 与include virtual的区别

1、#include file 包含文件的相对路径，#include virtual包含文件的虚拟路径。

2、在同一个虚拟目录内，<!--#include file="file.asp"-->和<!--#include virtual="file.asp"-->效果是相同的，但假设虚拟目录名为myweb，则<!--#include virtual="myweb/file.asp"-->也可以通过调试，但我们知道<!--#include file="myweb/file.asp"-->是绝对要报错的。

3、如果一个站点下有2个虚拟目录myweb1和myweb2，myweb1下有文件file1.asp，myweb2下有文件file2.asp,，如果file1.asp要调用file2.asp，那么在file1.asp中要这样写：<!--#include virtual="myweb2/file2.asp"-->，在这种情况下用#include file是无法实现的，用<!--#include file="myweb2/file2.asp"-->必然报错。相反，在myweb2的文件中包含myweb1中的文件也是一样。如果该被包含文件在某个文件夹下面，只要在虚拟路径中加上该文件夹即可。

4、不论用#include file 还是 #include virtual，在路径中用“/”还是“\”或者二者交叉使用都不会影响编译效果，程序会顺利执行。

5、以上情况不适用于2个站点文件的相互调用，而且在同一个站点内，<!--#include file="file.asp"-->和<!--#include virtual="file.asp"-->等效，但假设站点名为website，使用<!--#include virtual="website/file.asp"-->是错误的。

如果此时通过include的方式不行的话还得需要配置一下，apache的httpd.conf。

1. 确认加载include.so模块，将注释去掉： 
LoadModule include_module libexec/apache2/mod_include.so 

2. AddType部分去掉这两段注释： 
AddType text/html .shtml 
AddOutputFilter INCLUDES .shtml 

3. Directory目录权限里面找到 
Options Indexes FollowSymLinks 
增加Includes修改为： 
Options Indexes FollowSymLinks Includes 

4. 重新启动Apache，测试： 
<!–#include file=”head.html”–> 
Holle Word!，这是中间的内容 
<!–#include file=”foot.html”–>

此种方式我在apache是测试过，有效。
如果你的网站是通过jexus部署的话，暂时没有方式去解决。