最近频繁的做一些通过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. 二分lower_bound()与upper_bound()的运用

    <span style="color:#6633ff;">/* G - 二分 Time Limit:2000MS Memory Limit:32768KB 64bit ...

  2. win下IE设置

    当win7系统时需要升级IE为11版本,需要先安装sp1版本补丁,再装IE11,若还是装不了,可借助第三方平台(电脑管家等)升级安装.或 更新系统再安装IE11 https://jingyan.bai ...

  3. Java的Graphics中drawImage与drawLine的坐标区别

    drawImage复制的区域是 dx1 <= x < dx2,dy1 <= y < dy2 drawLine绘制区域是 dx1 <= x <= dx2,dy1 &l ...

  4. 如何调试Node.js

    Debugging Node.js with Chrome DevTools https://nodejs.org/en/docs/guides/debugging-getting-started/ ...

  5. Applications using Launch Screen Files and targetting iOS 7.1 and earlier need to also include a Launch Image in an Asset Catalog.

    在使用xcode6建的项目时,有时在ios7模拟器下会出现一下情况 导航栏上方和tabbar下方会有黑边 并且会有一下警告: Applications using Launch Screen File ...

  6. Flask的配置文件 与 session

    配置文件 flask中的配置文件是一个flask.config.Config对象(继承字典) 默认配置为: { 'DEBUG': get_debug_flag(default=False), 是否开启 ...

  7. 洛谷 P2822 [ NOIP 2017 ] 组合数问题 —— 数学

    题目:https://www.luogu.org/problemnew/show/P2822 阶乘太大,算不了: 但 k 只有 8 个质因子嘛,暴力60分: #include<iostream& ...

  8. bzoj1898 [Zjoi2005]Swamp 沼泽鳄鱼——矩阵快速幂

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1898 求到达方案数...还是矩阵快速幂: 能够到达就把邻接矩阵那里赋成1,有鳄鱼的地方从各处 ...

  9. JavaScript代码优化新工具UglifyJS

    jQuery 1.5 发布的时候 john resig 大神说所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意. UglifyJS 是一个服务端no ...

  10. ruby on rails, api only, 脚手架

    rails new connector_api --api --database=postgresql bundle install rake db:create rails g scaffold i ...