如何实现多个.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. bypass安全狗测试学习

    搭建简单的sql注入环境 在test数据库中创建sqltest表,插入字段数据 编写存在注入的php文件 <?php $id = $_REQUEST['uid']; echo "您当前 ...

  2. python 获取的json字符串取值

    获取到的json字符串,然后对其取值 {u'result': {u'10.10.10.100': {u'status': u'OK', u'msg': u"{'listen': {'': s ...

  3. kubernetes删除pod，pod一直处于Terminating状态

    删除pod,pod一直处于Terminating状态 [root@yxz-cluster01 deploy_yaml]# kubectl get pod -n yunanbao NAME READY ...

  4. 使用RNN对文本进行分类实践电影评论

    本教程在IMDB大型影评数据集 上训练一个循环神经网络进行情感分类. from __future__ import absolute_import, division, print_function, ...

  5. PHP反序列化漏洞总结（二）

    写在前边 之前介绍了什么是序列化和反序列化,顺便演示了一个简单的反序列化漏洞,现在结合实战,开始填坑 前篇:https://www.cnblogs.com/Lee-404/p/12771032.htm ...

  6. JDBC处理CLOB 和 BLOB大对象

    在数据库中: clob用于存储大量的文本数据 可以使用字符流操作 clob用于存储大量的二进制数据 可以使用字节流操作 以mysql为例 先准备一张表: CREATE TABLE `t_user2` ...

  7. Java面试系列第3篇-HashMap相关面试题

    HashMap是非线程安全的,如果想要用线程安全的map,可使用同步的HashTable或通过Collections.synchronizeMap(hashMap)让HashMap变的同步,或者使用并 ...

  8. Docker help详细帮助

    常用的 docker 命令 docker # docker 命令帮助 Commands: attach Attach to a running container # 当前 shell 下 attac ...

  9. Linux open() 一个函数，两个函数原型

    open在手册中有两个函数原型, 如下所示: int open(const char *pathname, int flags); int open(const char *pathname, int ...

  10. 结构体 偏移量 (size_t)&(((s *)0)->m) , list相关

    在Windows SDK 的stddef.h 中 #define offsetof(s,m) (size_t)&(((s *)0)->m) 应用例如 #define list_conta ...