最近频繁的做一些通过iframe在a页面嵌入b页面需求。总结下来,有以下问题需要解决

1.如何同步iframe与嵌入内容的高度

2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航等等

-如何同步iframe与嵌入内容的高度

a)获取由iframe引入的页面高度

contentWindow返回的是嵌入到中页面的window对象。可以通过这个window对象获取到网页的高度。contentWindow支持所有主流浏览器。

contentDocument返回的是嵌入页面的document对象。

b)同步引入页面与iframe的高度

将获取到的高度赋值给iframe

demo

  <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

window.frames

HTML IFrameElement

iframe

contentWindow for an iframe

js操作iframe里的dom

如何同步iframe与嵌入内容的高度的更多相关文章

  1. iframe框根据内容自适应高度

    1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...

  2. iframe 随内容自适应高度

    兼容性好的 html代码: <iframe src="enterprise/enter_edit.aspx" id="mainframe" framebo ...

  3. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  4. iframe内容自适应高度

    一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...

  5. IFrame 根据嵌入页面自动调节大小

    很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用Ifram ...

  6. 【HTML5】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...

  7. Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容

    Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...

  8. 【HTML 元素】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...

  9. 使用Jquery向一个空白网页动态创建一个iframe,及嵌入页面,和向嵌入页面传参

    [csharp] view plaincopyprint?using Microsoft.VisualBasic; using System; using System.Collections; us ...

随机推荐

  1. UnicodeEncodeError:'latin-1' codec can't encode character

    UnicodeEncodeError:'latin-1' codec can't encode character

  2. 说说循环与闭包——《你不知道的JS》读书笔记(一)

    什么是闭包 <你不知道的JS>里有对闭包的定义:"当函数可以记住并访问所在的词法作用域,即使函数是在当前作用域之外执行,这就产生了闭包." 讲闭包是啥的太多了...就一 ...

  3. 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 ...

  4. iOS 开发 公司开发者账号,在多台Mac上合作开发,共用一个账号和证书--图文详解

    参考 导出证书申请的MAC里的Xcode的开发者账号 .developerprofile 导出的开发者账号文件.developerprofile 导出PKCS12既是.p12文件 所拷贝的资料, .d ...

  5. Python 私有化类的属性

    class MandgerSec: def __init__(self,name,gender,level): self.type=("fire",None) self.name= ...

  6. ffmpeg 有用命令 (转载)

    转自:http://blog.csdn.net/simongyley/article/details/9984167 1.将h264文件解码为yuv文件 ffmpeg -i file.h264 fil ...

  7. python实现汉诺塔程序

    # 汉诺塔思想笔记# 认识汉诺塔的目标:把A柱子上的N个盘子移动到C柱子# 递归的思想就是把这个目标分解成三个子目标# 子目标1:将前n-1个盘子从a移动到b上# 子目标2:将最底下的最后一个盘子从a ...

  8. Web前端汇总

    http://www.cnblogs.com/bigboyLin/p/5272902.html HTML/CSS部分   1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括 ...

  9. 01背包(类) UVA 10564 Paths through the Hourglass

    题目传送门 /* 01背包(类):dp[i][j][k] 表示从(i, j)出发的和为k的方案数,那么cnt = sum (dp[1][i][s]) 状态转移方程:dp[i][j][k] = dp[i ...

  10. 全面学习ORACLE Scheduler特性(4)创建和管理Schedule

    三.使用Schedules 10g 中新推出的SCHEDULER可能确实会让很多初接触的朋友感觉晕头晕脑,相比之前的jobs,SCHEDULER中新增的概念太多.比如说jobs,仍然可以理解成之前版本 ...