如何实现多个.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. MVC-过滤器-权限认证

    过滤器主要基于特性,aop来实现对MVC管道中插入其他处理逻辑.比如,访问网站,需要检查是否已经登陆,若没登陆跳入登陆界面. 样例: 方法注册 执行效果 当不符合认证时: 上面是方法注册特性.还有类注 ...

  2. 让所有网站都提供API的Python库：Toapi

    这是一个让所有网站都提供API的Python库.以前,我们爬取数据,然后把数据存起来,再创造一个api服务以便其他人可以访问.为此,我们还要定期更新我们的数据.这个库让这一切变得容易起来.你要做的就是 ...

  3. 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值

    首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...

  4. 萌新带你开车上p站（番外篇）

    本文由“合天智汇”公众号首发,作者:萌新 前言 这道题目应该是pwnable.kr上Toddler's Bottle最难的题目了,涉及到相对比较难的堆利用的问题,所以拿出来分析. 登录 看看源程序 程 ...

  5. SQL三表连接查询与集合的并、交、差运算查询

    use db_sqlserver2 select 姓名, 工资, 面积, 金额, (工资+金额/1000) as 实发工资 from 职工,仓库, 订购单 where 职工.职工号=订购单.职工号 a ...

  6. Zabbix3.4安装部署

    Zabbix3.4安装部署 一.系统环境 cat /etc/redhat-release  CentOS Linux release 7.3.1611 (Core)  关闭防火墙及selinux sy ...

  7. poj_1323 Game Prediction 贪心

    Game Prediction Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11814   Accepted: 5701 ...

  8. npm小工具、技巧合集:让你的npm“健步如飞”

    1.解决安装速度慢问题-nrm 解决痛点 由于npm的包仓库是在国外,npm包安装速度较慢,部分包甚至无法安装. 对比cnpm的优势 1.cnpm增加了大脑的记忆和思维负担,常常需要考虑使用npm还是 ...

  9. Neditor 2.1.16 发布，修复缩放图片问题

    开发四年只会写业务代码,分布式高并发都不会还做程序员?   BUG 修复 修复缩放图片时,鼠标mouseUp后图片还是在缩放 by @ShinyHwong Demo:  https://demo.ne ...

  10. 深入实践Spring Boot1.4　运行与发布

    1.4 运行与发布 本章实例工程的完整代码可以使用IDEA直接从GitHub的https://github.com/chen-fromsz/spring-boot-hello.git中检出,如图1-1 ...