如何同步iframe与嵌入内容的高度
最近频繁的做一些通过iframe在a页面嵌入b页面需求。总结下来,有以下问题需要解决
1.如何同步iframe与嵌入内容的高度
2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航等等
-如何同步iframe与嵌入内容的高度
a)获取由iframe引入的页面高度
contentWindow返回的是嵌入到中页面的window对象。可以通过这个window对象获取到网页的高度。contentWindow支持所有主流浏览器。
contentDocument返回的是嵌入页面的document对象。
b)同步引入页面与iframe的高度
将获取到的高度赋值给iframe
<iframe src="http://jsbin.com/nobefis" id="currentFrame" width="100%" scrolling="no" frameborder="no"></iframe> <script>
function resizeFrameHeight(currentFrame){
if(currentFrame){
var iframeObj = currentFrame.contentWindow;//获取iframe引入网页的window对象,进而通过window对象获取引入内容的document对象
if(iframeObj.document.body){
currentFrame.height = iframeObj.document.body.scrollHeight;
}
}
} window.onload = function () {
resizeFrameHeight(document.getElementById("currentFrame"))
}
</script>
HTMLIFrameElement.contentWindow
如何同步iframe与嵌入内容的高度的更多相关文章
- iframe框根据内容自适应高度
1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...
- iframe 随内容自适应高度
兼容性好的 html代码: <iframe src="enterprise/enter_edit.aspx" id="mainframe" framebo ...
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- iframe内容自适应高度
一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...
- IFrame 根据嵌入页面自动调节大小
很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用Ifram ...
- 【HTML5】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...
- Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容
Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...
- 【HTML 元素】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...
- 使用Jquery向一个空白网页动态创建一个iframe,及嵌入页面,和向嵌入页面传参
[csharp] view plaincopyprint?using Microsoft.VisualBasic; using System; using System.Collections; us ...
随机推荐
- make常见报错原因分析
1 No rule to make target ‘xxx’ 原因一般是'xxx'文件不存在,首先应该去相应的目录检查文件是否存在.
- https://security.stackexchange.com/questions/68405/what-is-tmunblock-cgi-and-can-it-be-exploited-by-shellshock-linux-apache-w
hndUnblock.cgi Line #1124 : 187.38.233.45 - - [15/Jan/2018:21:36:45 +0800] "GET /hndUnblock.c ...
- HDU 5763Another Meaning
Another Meaning Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- Bing必应地图中国API - 在地图上画圆
Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37| 分类: Bing&Google|字号 订阅 <变形金刚2>上映4日国内票房过亿,基 ...
- 【Codevs 3115】高精度练习之减法
http://codevs.cn/problem/3115/ 板子题~ // <H.cpp> - Sun Oct 9 12:58:23 2016 // This file is made ...
- KeepAlived的实现示例
KeepAlived的实现示例 KeepAlived的实现 HA Cluster配置准备: 各节点时间必须同步 ntp(6), chrony(7) 1>在centos6上 ntpdate 172 ...
- C# 简单实现直线方程,抛物线方程(转载)
http://www.cnblogs.com/hsiang/archive/2017/01/17/6294864.html 本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程, ...
- Spring MVC的学习笔记
基于注解形式配置Spring MVC 一.注册并初始化DispatcherServlet,由Servlet容器自动检测并启动 注解形式 public class MyWebApplicationIni ...
- bzoj 4297: [PA2015]Rozstaw szyn【瞎搞】
从叶子往上先拓扑一下,建立虚拟root,从root开始dfs.注意到每个点的最优取值一定是一个区间(中位数区间),从儿子区间推出父亲区间即可 #include<iostream> #inc ...
- js获取标签的三种方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...