如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
如何实现多个.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）的更多相关文章
- 024 如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）
前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight.友情链接等部分) 当前方法:通过load()函数,引入公共头部和尾部文件 ...
- MVC中的_viewstart.cshtml（没有设置Layout却引用了布局）
今天Home视图中新增了一个视图,因为不需要设置Layout就没与管他,但是运行起来一看,自动引用了布局,分析了半天 也没看出是哪的错误? 后来尝试着在area中增加了一个同样的视图就没有问题,比较这 ...
- 多个页面引用公共的头部 header.html 和尾部 footer.html
方法:通过load()函数,引入公共头部和尾部文件; js代码预览: $(".headerPage").load("header.html"); $(" ...
- 前端引用公共html模块方案
最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在 ...
- linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib
对于ln命令网上有很多的教程,这里不再复述, 其基本目的是:多个文件夹公用一个文件夹的里的文件. 其基本命令格式: ln [option] source_file dist_file (source_ ...
- 引用公共页面的js函数报错
对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...
- 微信小程序引用外部js，引用外部样式，引用公共页面模板
https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...
- vue如何全局引用公共js
在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js) src/common/utils.js export def ...
- 原生aspx页面如何引用公共js和css
项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用 ...
随机推荐
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
- redis的多路复用是什么鬼
有没有人和我一样, 自打知道了redis, 就一直听说什么redis单线程, 使用了多路复用等等. 天真的我以为多路复用是redis实现的技术. 今天才发现, 我被自己骗了, 多路复用是系统来实现的. ...
- [wp]xctf newscenter
手工注入 查询所有数据库名称和表名 ' union select 1,table_schema,table_name from information_schema.tables# 发现就两个数据库i ...
- 免费 https 申请步骤，你必须知道
不适用 https 加密的网站,基本上就等于在裸奔. 来,开始开始动手做 我的系统是 CentOS6 第一步:安装Certbot Certbot可以用于管理(申请.更新.配置.撤销和删除等)Let's ...
- shell脚本之awk(一)
运维必备技能 概述: 1.awk是一种编程语言,用于linux/unix下对文本和数据进行扫描.处理数据来源:标准输入.文件.管道. 2.linux中常用的awk编译器版本有mawk,gawk.R ...
- 监控CPU与GPU的工具
1.sensor:可以显示包括cpu在内的所有传感器的当前读数 使用sensors可以检测到cpu的温度,风扇的风速度,电压等. 2.Glances使用Python写的跨平台的curses的检测工具. ...
- VHD VHDX 区别
A Virtual hard disk is saved either with VHD or VHDX file extension. VHD is the older while VHDX is ...
- NTSTATUS code 和 Windows 系统错误码 的对应关系
出处:https://github.com/dokan-dev/dokany/blob/master/dokan/ntstatus.i case EPT_S_CANT_CREATE: return E ...
- 备忘录模式 （c++实现）
模式定义 备忘录(Memento): 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将该对象恢复到原先保存的状态. 模式动机 备忘录模式比较适用于功能比较复 ...
- 数据挖掘入门系列教程（十一点五）之CNN网络介绍
在前面的两篇博客中,我们介绍了DNN(深度神经网络)并使用keras实现了一个简单的DNN.在这篇博客中将介绍CNN(卷积神经网络),然后在下一篇博客中将使用keras构建一个简单的CNN,对cifa ...