如何同步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 ...
随机推荐
- PNG vs. GIF vs. JPEG vs. SVG - When best to use?
image - PNG vs. GIF vs. JPEG vs. SVG - When best to use? - Stack Overflow https://stackoverflow.com/ ...
- regulator_get 调用过程【转】
本文转载自:http://blog.csdn.net/u012719256/article/details/52083961 Touch panel DTS 分析(MSM8994平台,Atmel 芯片 ...
- 洛谷T51924 忘情
二分上界有多大开多大 二分上界有多大开多大 二分上界有多大开多大 重要的事情说三遍 又被bright神仙带着做题了 先无脑上wqs二分 我们可以把这个柿子画一下,区间的花费就变成((sigema(l~ ...
- uva10870
https://vjudge.net/problem/UVA-10870 裸的矩阵快速幂 注意系数矩阵在前面 因为系数矩阵为d*d 方程矩阵为d * 1 放反了就是d * 1 d * d 不符合矩阵乘 ...
- Python Flask Web 框架入门
Python Flask 目录 本文主要借鉴 letiantian 的文章 http://www.letiantian.me/learn-flask/ 一.简介 二.安装 三.初始化Flask 四.获 ...
- oracle从子表取出前几行数据:
取排序后的前几行,应该用: select * from(select * from test order by stamp desc) where rownum<= 6 (表示排序后取前几行) ...
- sql让时间调前,调后的语句
时间调前,调后 select billid,DATEADD(mm,2,billdate) from bi_Bill 注:用dateadd(/时间年/月/日,调前或后多少,字段) mm为月份,2为调前两 ...
- 2017杭电多校第七场1011Kolakoski
Kolakoski Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others) Tota ...
- DFS/BFS(同余模) POJ 1426 Find The Multiple
题目传送门 /* 题意:找出一个0和1组成的数字能整除n DFS:200的范围内不会爆long long,DFS水过~ */ /************************************ ...
- ACM_寒冰王座(完全背包)
寒冰王座 Time Limit: 2000/1000ms (Java/Others) Problem Description: 不死族的巫妖王发工资拉,死亡骑士拿到一张N元的钞票(记住,只有一张钞票) ...