我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。

在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择

如果有些浏览器本地实现不了，那么放到服务器上面！（重要！！！）

注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置

<style type="text/css">

    *{

        margin:;

        padding:;

    }

</style>

下面介绍几种实现方法：

一、import引入(<head>中引入文件，<script>中加载内容)

href链接引入的html文件，id可以看做页面引导，在script中用到

<head>

    <meta charset="utf-8" />

    <title>主页面</title>

    <!--import引入-->

    <link rel="import" href="top.html" id="page1"/>

    <link rel="import" href="fotter.html" id="page2"/>

</head>
<!--注意顺序-->

<!--import在头部引入，里面是啥就是啥-->

<script type="text/javascript">

    document.write(page1.import.body.innerHTML);

</script>

hello world！<!--本页面写入内容-->

<script type="text/javascript">

    document.write(page2.import.body.innerHTML);

</script>

二、通过JQuery的load()方法加载页面

相当于把引入的html中head和body标签中的数据拖出来，在外面包了一个你自己写的标签，比如说上面代码中的<div class="top"></div>

<!--注意顺序-->

<!--使用js引入，引入整个文档，但是没有html和body，相当于body里面的数据-->

<div class="top">top</div>

<div class="center">

    <p>你好，我在中间！</p>

</div>

<div class="footer">footer</div>

<script src="js/jq/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

//在js中引入

$(document).ready(function () {

    $('.top').load('top.html');

    $('.footer').load('fotter.html');

});

</script>

三、object引入和iframe引入（带有滚动条，视情况使用）

<!--object引入，相当于把整个页面拉过来（在一个html中嵌套另一个html），包括title,meta,body,html等-->

<!--此处的高是嵌套进去的整个html的高，不包括边框，padding等-->

<object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object>

<!--iframe引入，同object方式一样，页面整个嵌套，默认高度为150,frameborder设置为1时边框宽度为2-->

<iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>

两中引入方式比较：

  • 相同点：
    1. 默认高度为150
    2. 引入后本页面html嵌套引入页面html，整个引入
  • 不同点：
    1. iframe引入使用scrolling="no"可以不让页面进行滚动，取消右侧滚动条
    2. iframe中 frameborder="no"可以修改为0或1，这里不是指宽度，可以理解为布尔型，当设为1时border宽度为2

在html页面中引入另一个html页面的更多相关文章

  1. JSP页面中引入另一个JSP页面

    一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...

  2. 在JSP页面中调用另一个JSP页面中的变量

    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...

  3. 在一个JSP页面中包含另一个JSP页面的三种方式

    转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令          includ ...

  4. 页面中引入mui 地址选择，点击页面中其他input时页面回到顶部

    问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...

  5. 同一页面中引入多个JS库产生的冲突解决方案(转)

    发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...

  6. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  7. 在一个jsp页面中引用另一个jsp文件的路径的问题

    为了提高代码的重用性,经常需要在一个jsp页面中引用另一个jsp文件的代码.关于引用时的路径的问题.下面只介绍动态引用的,我觉得静态引用的应该也一样. 相对路径: 一.在同一个文件夹下,a.jsp中引 ...

  8. [转载]android工程中引入另一个工程中的资源

    原文地址:android工程中引入另一个工程中的资源作者:87fayuan 在项目中可能遇到这样的问题:项目过大,于是细分为N个子模块来做,每个模块都是不同的工程.涉及到activity传数据时,可以 ...

  9. 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了

    原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...

随机推荐

  1. 洛谷 P5683 【[CSPJX2019]道路拆除】

    先用做的暴力,因为n最多才3000嘛,但是后来发现时间复杂度不止\(O\)(\({n}^2\)),然后就放弃了. 讲讲我的暴力+错误思路吧: 把1到s1和s2的最短路算出来,用SPFA,然后用DFS求 ...

  2. MySQL 前期准备

    一.数据库的基本概念 数据库的英文单词:DataBase,简称:DB. 数据库:用于存储和管理数据的仓库. 数据库的特点: 持久化存储数据的.其实数据库就是一个文件系统,是以文件的方式存在服务器的电脑 ...

  3. kubernetes-pod驱逐机制

    1.驱逐策略 kubelet持续监控主机的资源使用情况,并尽量防止计算资源被耗尽.一旦出现资源紧缺的迹象,kubelet就会主动终止部分pod的运行,以回收资源. 2.驱逐信号 以下是一些kubele ...

  4. MySQL 事务 异常 事务隔离的级别

    MySQL 事务 异常 事务隔离的级别   事务 在你操作数据库的同时,有可能其他用户还会不断地对数据进行增删改查操作.为了避免并行进行时出现混乱,就产生了"事务".事务就是要保证 ...

  5. [USACO16OPEN]248 G——区间dp

    [USACO16OPEN]248 G 题目描述 Bessie likes downloading games to play on her cell phone, even though she do ...

  6. TKCTF-学校内部的校赛

    *Reverse easy_C easy_re1.exe 在网络百度到解决逆向需要用到软件IDA 然后用IDA打开一条条的找我找到了一条很怪的ZmxhZ3s1ZWU1ZjYyOC1mMzVhLTQxN ...

  7. day07总结

    元组常用操作 # ======================================基本使用======================================# 1.用途:元组就是 ...

  8. __FILE__和__DIR__的用法

    dirname(__FILE__)由两部分组成, __FILE__ 魔术变量和 dirname() 函数.__FILE__是当前脚本的绝对路径,通过 dirname() 函数后,就可以获得脚本所在目录 ...

  9. shell专题（十一）：企业真实面试题（重点）

    11.1 京东 问题1:使用Linux命令查询file1中空行所在的行号 答案: [atguigu@hadoop102 datas]$ awk '/^$/{print NR}' sed.txt 问题2 ...

  10. 数据可视化之powerBI技巧（九）PowerBI按周进行业务分析的思路

    按周进行数据分析,在零售业.电商等类型的公司中很常见,但是不少人觉得按周进行分析无从下手,一个主要的原因是找不到对应的函数,因为时间智能函数只对应年.季.月.天这几个粒度,没有关于周的时间智能函数. ...