如何实现多个.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. Laravel 5.7 RCE (CVE-2019-9081)

    Laravel 代码审计 环境搭建 Laravel 5.7 文档 : https://learnku.com/docs/laravel/5.7/installation/2242 Composer 下 ...

  2. B站百大UP主党妹被黑客勒索！！！

    4月27日,哔哩哔哩视频网站的UP主“机智的党妹”发布消息称,自己被黑客勒索了.她的视频表示:“事发突然,我被勒索了,你也有可能继续被诈骗!这种诈骗的页面是由病毒程序自动生成并留在那里的.”根据她的介 ...

  3. sqli lab 1-4

    less-1 爆库 id=1222' union select 1,group_concat(schema_name),database() from information_schema.schem ...

  4. tp5中“前置操作”和“钩子函数”的区别

    1.实行顺序: 以下都是标为删除前的操作: 点击删除  ->  前置操作  ->  删除方法(用模型删除)  ->  触发钩子函数(删除)  ->  删除成功 2.传入的参数: ...

  5. Nginx四层代理

    Nginx支持四层代理 http://nginx.org/en/docs/stream/ngx_stream_core_module.html 该ngx_stream_core_module模块自1. ...

  6. Codeforces Round #635 (Div. 2) 题解

    渭城朝雨浥轻尘,客舍青青柳色新. 劝君更尽一杯酒,西出阳关无故人.--王维 A. Ichihime and Triangle 网址:https://codeforces.com/contest/133 ...

  7. 【高并发】又一个朋友面试栽在了Thread类的stop()方法和interrupt()方法上！

    写在前面 新一轮的面试已经过去,可能是疫情的原因吧,很多童鞋纷纷留言说今年的面试题难度又提高了,尤其是对并发编程的知识.我细想了下,也许有那么点疫情的原因吧,但无论面试的套路怎么变,只要掌握了核心知识 ...

  8. 通用权限管理系统组件 (GPM - General Permissions Manager)

    有的公司开发人员只那么几个,一个人支撑整个公司所有的IT系统实在有点累,不想自己写权限系统了,自己琢磨不也是要花时间和精力,要为此付出多少时间和汗水阿,细细的皱纹不知要多多少呢,重复建设不是白白浪费生 ...

  9. windows下遍历文件夹

    Github地址 函数: HANDLE WINAPI FindFirstFile( _In_ LPCTSTR lpFileName, _Out_ LPWIN32_FIND_DATA lpFindFil ...

  10. C++获取当前系统时间并格式化输出

    C++中与系统时间相关的函数定义在头文件中. 一.time(time_t * )函数 函数定义如下: time_t time (time_t* timer); 获取系统当前日历时间 UTC 1970- ...