如何同步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 ...
随机推荐
- 洛谷 P1383 高级打字机==codevs 3333 高级打字机
P1383 高级打字机 18通过 118提交 题目提供者yeszy 标签倍增图论高级数据结构福建省历届夏令营 难度省选/NOI- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 早苗入手 ...
- height not divisible by 2
height not divisible by 2 h.264 - FFMPEG (libx264) "height not divisible by 2" - Stack Ove ...
- CI框架下的get_instance() 函数
你随便下个CI框架的源码都会看到很多的get_instance() 函数,这个函数是用来获取CI 的全局超级对象,CI 是单例模式的框架,所有全局有一个超级对象.因为只有一个实例,所以无论这个函数使用 ...
- visual studio , JavaScript , UnitTest
https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/debug-test/basic-test ...
- Proxy authentication confirmation prompt keeps popping up although the user/password is saved 火狐浏览器一直提示输入代理的账号和密码
https://support.mozilla.org/zh-CN/questions/943488 signon.autologin.proxy;true network.proxy.share_p ...
- tracert 路由跟踪程序
C:\Users\Administrator>tracert 10.0.0.1 通过最多 30 个跃点跟踪到 10.0.0.1 的路由 1 <1 毫秒 1 ms 3 ms 192.168. ...
- luogu 2627 修建草坪
题目大意: 一个数列,取出一些数使得它们的总和最大且没有k个连续 思路: 首先我们可以找到一个nk的dp dp方程:dp[i]=dp[i-1]+sum[i]-sum[j] (sum[j]尽量小) 然后 ...
- dubbo作者讲编码原则
刚看到梁飞谈到dubbo为保证代码质量开发人员必须要注意的,其实也是开发人员应该做的. 1. 防止空指针和下标越界 这是我最不喜欢看到的异常,尤其在核心框架中,我更愿看到信息详细的参数不合法异常, 这 ...
- win10设置锁屏时间
这里应该修改成自己希望的分钟数 比如120分钟
- SVG Path标签 A 参数
A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx:x轴半径ry:y轴半径x-axis-rotation:指椭圆的X轴与水平方向顺时针方向夹 ...