如何实现多个.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. kioptrix靶机记录

    靶机地址:172.16.1.193 Kali地址:172.16.1.107 首页为Apache测试页,没看到有价值信息 尝试目录扫描: 点击查看: http://172.16.1.193/index. ...

  2. PHP-fpm 远程代码执行漏洞(CVE-2019-11043)复现

    简介 9 月 26 日,PHP 官方发布漏洞通告,其中指出:使用 Nginx + php-fpm 的服务器,在部分配置下,存在远程代码执行漏洞.并且该配置已被广泛使用,危害较大. 漏洞概述 Nginx ...

  3. 常见web漏洞整理之进击吧xss!!！

    XSS在线测试环境: http://xss-quiz.int21h.jp/ https://brutelogic.com.br/xss.php 这两个站对xss的理解很有帮助!!! 参考链接: htt ...

  4. jeecg ant design vue 一些收藏

    1关于 进来清除上次记录 找到src/permission.js下的

  5. 4.K均值算法--应用

    1. 应用K-means算法进行图片压缩 读取一张图片 观察图片文件大小,占内存大小,图片数据结构,线性化 用kmeans对图片像素颜色进行聚类 获取每个像素的颜色类别,每个类别的颜色 压缩图片生成: ...

  6. tp5 auth权限的原理

    我的一些个人理解,还是有些不懂的地方,有错误请指正,谢谢!!! class Auth{ //默认配置 protected $_config = array( 'auth_on' => true, ...

  7. java中Future的使用

    文章目录 创建Future 从Future获取结果 取消Future 多线程环境中运行 java中Future的使用 Future是java 1.5引入的一个interface,可以方便的用于异步结果 ...

  8. 企业云桌面-03-安装第1个企业 CA-013-CA01

    作者:学 无 止 境 QQ交流群:454544014 注意: <企业云桌面>系列博文是<企业云桌面规划.部署与运维实践指南>的基础部分,因为书中内容涉及非常多,非常全面,所以基 ...

  9. Uber是一部无所不在的数字出行物联网

    "Uber化"是整合服务产业与智能车联网的知识经济,是数字时代展现个人化生活态度无可逆转的趋势,是新兴数字族群运用数字工具集体分享出行资源的平台. 搭过Uber的消费者,对其服务质 ...

  10. APP路由还能这样玩

    本文主要讲述一种设计思路,组件化架构市面上已经有很多大厂成熟的方案,但是在组件化过程中,偶尔会遇到2个独立业务子模块间没有相互引用,也需要能直接调用对方的功能,因此我想到通过方法路由来解决,如果还有疑 ...