我们写页面通常会遇到这种情况,一个模块很多页面都用到,那么我们为了方便就会单独写到一个页面,然后引入进去,我知道的有三种:

1、用标签<iframe></iframe>

例:

<iframe align="center" height="570" src="lib/sideBarL.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

iframe有自己默认的高度,如果你引入的页面高度超出他默认的高度会超出隐藏,所以,要加上height="";

2、用标签<object></object>

例:

<object data="lib/sideBarL.html" type="text/x-scriptlet" height="570"></object>

object也有自己的默认高度,如果你引入的页面高度超出他默认的高度,引入部分会出现纵向滚动条,这个就很影响页面美观了,所以也是要加上height="";

3、div+$(“document”).load(“b.html”);

例:

<div class="sidebar"></div>
$('.sidebar').load('lib/sideBarL.html');

需要注意的是,这个div里面必须是空的,里面没有任何元素,如果里面有其他的标签,那么你引入的html会替换原来存在的内容。

好啦,就到这里。

html页面中引入html的更多相关文章

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

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

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

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

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

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

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

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

  5. 在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 ...

  6. jsp页面中引入文件路径问题的解决方案(使用request获取项目路径)【原创】

    在项目页面中,总会引入一些js和css,相对路径or绝对路径的选择就显得至关重要了!下面是项目中遇到的问题和解决方案,做一下记录! 环境: myEclipse创建工程,使用jsp+css+js,项目目 ...

  7. Java项目在jsp页面中引入jquery框架的步骤

    环境:在Java  web项目中引入juqery框架 工具:MyEclipse8.5 [步骤如下] A:新建一个Java web项目TestJquery,在WebRoot目录下创建一个jquery文件 ...

  8. 页面中引入百度地图,实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

  9. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  10. thymeleaf:在一个页面中引入其它的页面

    这个在jsp中很容易实现,但是springBoot不推荐使用jsp,建议使用thymeleaf,下面是在thymeleaf中引入界面的方法 1.修改配置文件 spring: mvc: static-p ...

随机推荐

  1. Firefox、IE、chrome浏览器和驱动下载地址

    一.Firefox和驱动下载地址 selenium2.X最高支持的Firefox版本为46,使用selenium2.X的话不需要下载火狐驱动,只需要配置火狐的启动路径即可. Selenium3.0开始 ...

  2. springboot 用redis缓存整合spring cache注解,使用Json序列化和反序列化。

    springboot下用cache注解整合redis并使用json序列化反序列化. cache注解整合redis 最近发现spring的注解用起来真的是很方便.随即产生了能不能吧spring注解使用r ...

  3. 平面割线平分点(构造)--牛客第三场-- Magic Line

    题意: 给你n个点的坐标,让你给出两个点,这两个点的连线可以平分这些点. 思路: 先按y的大小排序,在按x的小排序,再搞一下就行了.如下图: #include <bits/stdc++.h> ...

  4. Java 条件语句 if else

    一个 if 语句包含一个布尔表达式和一条或多条语句. 语法 if 语句的语法如下: if(布尔表达式) { //如果布尔表达式为true将执行的语句 } 如果布尔表达式的值为 true,则执行 if ...

  5. vscode中eslint插件的配置-prettier

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个esli ...

  6. 分布式---Paxos算法

    5.Paxos   Paxos算法解决的问题是一个分布式系统如何就某个值(决议)达成一致.一个典型的场景就是,在一个分布式数据库系统中,如果各节点的初始状态一致,每个节点执行相同的操作序列,那么他们最 ...

  7. 基于EPICS实现西门子S7通信

    (1)       EPICS官网下载Demo并复制文件到指定位置 (2)       创建Modules文件夹,wget https://epics.anl.gov/download/modules ...

  8. spring 在web.xml 里面如何使用多个xml配置文件

    1, 在web.xml中定义 contextConfigLocation参数.spring会使用这个参数加载.所有逗号分割的xml.如果没有这个参数,spring默认加载web-inf/applica ...

  9. 常用的商业级和免费开源Web漏洞扫描工具

    Scanv 国内著名的商业级在线漏洞扫描.可以长期关注,经常会有免费活动.SCANV具备自动探测发现无主资产.僵尸资产的功能,并对资产进行全生命周期的管理.主动进行网络主机探测.端口探测扫描,硬件特性 ...

  10. MySQL 5.7 免安装版 access denied 解决办法

    MySQL 5.7 在Windows 下安装的过程很多人都写过了 但是安装完成后用 root 第一次登录时需要密码 可是我根本就没设密码嘛... 搞了半天最后终于搞定了 在执行 mysqld --in ...