如何实现多个.html静态页，引用同一个header.html和footer.html文件？

直接上代码：

公共头部文件：header.html

//不用写标准的html文档格式

<div>

     头部内容

</div>

公共尾部文件：footer.html

//不用写标准的html文档格式

<div>

     页脚内容

</div>

js文件：

当前方法：通过load()函数，引入公共头部和尾部文件;

代码预览：

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

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

html全部文件：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>demo演示</title>

    <link rel="stylesheet" href="css/style.css" />

</head>

<body>

<!-- 顶部导航 -->

<div class="headerpage"></div>

<!--顶部导航 over-->    

<!--中部主体-->

    <p>···代码省略···</p>

<!--中部主体 over-->  

<!--footer-->

<div class="footerpage"></div>

<!--footer over-->

<script src="js/jquery.min.js"></script>

<script>

    $(function(){

        /*公共部分

         * 导航栏

         * footer CopyRight

         */

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

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

    });

</script>

</body>

</html>

通过上面的描述，可以发现：

在header.html和footer.html文件中，并非是标准的html文档格式！

与此同时，通过index.html中的jQuery函数load()将上述的两个公共文件引入进来，从而形成一个完整的页面；

并且，不会影响到其他页面对于公共文件的引用和使用；

以上就是关于静态html文件，使用公共头部和尾部的解决办法之一。

如何让html引用公共布局（多个html文件公用一个header.html和footer.html）的更多相关文章

  1. 024 如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）

    前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight.友情链接等部分) 当前方法:通过load()函数,引入公共头部和尾部文件 ...

  2. MVC中的_viewstart.cshtml（没有设置Layout却引用了布局）

    今天Home视图中新增了一个视图,因为不需要设置Layout就没与管他,但是运行起来一看,自动引用了布局,分析了半天 也没看出是哪的错误? 后来尝试着在area中增加了一个同样的视图就没有问题,比较这 ...

  3. 多个页面引用公共的头部 header.html 和尾部 footer.html

    方法:通过load()函数,引入公共头部和尾部文件; js代码预览: $(".headerPage").load("header.html"); $(" ...

  4. 前端引用公共html模块方案

    最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在 ...

  5. linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib

    对于ln命令网上有很多的教程,这里不再复述, 其基本目的是:多个文件夹公用一个文件夹的里的文件. 其基本命令格式: ln [option] source_file dist_file (source_ ...

  6. 引用公共页面的js函数报错

    对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...

  7. 微信小程序引用外部js，引用外部样式，引用公共页面模板

    https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...

  8. vue如何全局引用公共js

    在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js)  src/common/utils.js export def ...

  9. 原生aspx页面如何引用公共js和css

    项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用 ...

随机推荐

  1. 磁盘性能测试工具之fio

    fio是测试磁盘性能的一个非常好的工具,用来对硬件进行压力测试和验证. 注意事项 CentOS 6.5等较老版本的操作系统用fdisk创建分区时,默认为非4KB对齐选择初始磁柱编号,对性能有较大的影响 ...

  2. MySQL中出现Unknow column 'xx' in field list的解决办法

    首先创建一个表,然后插入数据发现出错误 经过多次尝试发现title前面多了一个空格 我们把空格去掉,然后在插入数据,发现数据创建成功

  3. socket小计

    socket,是一个实现了双向通信的链接. 将http比喻为轿车,承载数据.传递数据,那么socket,就是轿车的发动机,它轿车动起来.

  4. java学习（第四篇）数组

    一.一维数组 1.声明,分配内存 int[] a=new int[10]; 数组元素的数据类型 [] 数组名=new 类型 [数组元素个数]: 2.初始化 int[] a=new int[] {1,2 ...

  5. SpringBoot Mybatis-Plus 整合 dynamic-datasource-spring-boot-starter 对数据库进行读写分离

    准备工作 对 MySql 进行主从搭建 引入 dynamic-datasource-spring-boot-starter 坐标 引入 druid-spring-boot-starter 坐标 对应框 ...

  6. 非阻塞同步机制和CAS

    目录 什么是非阻塞同步 悲观锁和乐观锁 CAS 非阻塞同步机制和CAS 我们知道在java 5之前同步是通过Synchronized关键字来实现的,在java 5之后,java.util.concur ...

  7. .NET平台上的编译器不完全列表（转别）

    http://www.cnblogs.com/william_fire/archive/2005/05/15/155800.html最近因为开发需要,要研究一下.NET上基于C#扩展的编译器实现的框架 ...

  8. 谈谈Java的线程池设计

    在实际项目中,如果因为想异步执行暂时性的任务而不断创建线程是很浪费资源的事情(当一个任务执行完后,线程也没用了).这种情况下,最好是将任务提交给线程池执行. 所谓池,就是将管理某一种资源,对资源进行复 ...

  9. POJ 2230 Watchcow 欧拉回路的DFS解法（模板题）

    Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 9974 Accepted: 4307 Special Judg ...

  10. codeforce 270C Magical Boxes

    C. Magical Boxes Emuskald is a well-known illusionist. One of his trademark tricks involves a set of ...