zoukankan      html  css  js  c++  java
  • 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部署的话,暂时没有方式去解决。

  • 相关阅读:
    mina简介
    idea编辑器jdk版本报错
    设计模式之-工厂模式
    设计模式之-外观模式
    ssm项目中bean注入失败,获取spring中指定bean之解决方案
    Jquery.Page.js 分页插件的使用
    发现某网站低级致命漏洞引发的对多用户系统安全性讨论
    C#微信公众号开发之网页授权oauth2.0获取用户基本信息(一)
    有关C#中使用if else和try catch的问题及效率问题
    C#伪静态实现的方法
  • 原文地址:https://www.cnblogs.com/justyouadmin/p/11850475.html
Copyright © 2011-2022 走看看