最近频繁的做一些通过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. [Codeforces 460C] Present

    [题目链接] https://codeforces.com/contest/460/problem/C [算法] 二分 + 贪心 要求最小值最大 , 我们不妨二分最小值 , 若一盆花的高度小于二分的值 ...

  2. jsp中一行多条数据情况

    1.实现效果:点击新增会在之前文本框后一直新增文本框并且保留新增的图片 效果图: 2.jsp代码: <table class="Business_Table"> < ...

  3. 【410】Linux 系统 makefile 文件

    makefile 主要是用来合并编译文件 CC = gcc puzzle: puzzle.c boardADT.o $(CC) puzzle.c boardADT.o -o puzzle -lm bo ...

  4. PCB Genesis加邮票孔(弧与弧)实现算法

    一.Genesis加邮票孔(弧与弧)实现算法 1.鼠标点击位置P点(可以确认搜索区域位置,确认点击位置周边元素分区,此所讲算法未应用到P点坐标) 2.求出:P1C与P2C (线与弧最近点距离的2个点) ...

  5. LaTex简历排版

    为了写好简历,倒腾了好几天的Latex,主要是因为中文支持问题还有morderncv的更新问题... 1.  http://www.ctex.org/CTeXDownload/ 建议下载v2.9.2. ...

  6. PHP的包依赖管理工具Composer简介

    composer是一个基于项目的依赖管理器,负责将php项目的所依赖的包和库安装在项目的目录中,默认不会不会安装任何数据到全局.他用于取代之前pear工具 1 安装Composer curl -sS  ...

  7. linux编译安装gcc5.3.0

    1.下载GCC5.3.0安装包 #su #cd /opt #wget http://ftp.gnu.org/gnu/gcc/gcc-5.3.0/gcc-5.3.0.tar.gz 2.解压 #.tar. ...

  8. Linux环境下修改MySQL数据库对表名大小写不敏感

    Linux系统中MySQL对数据库名称和表名是大小写敏感的,这就导致了一些麻烦,虽然已经建立了表和数据,但因为大小写导致无法找到表. MySQL数据库对表名大小写不敏感的设置方法如下: 1.查看MyS ...

  9. mysql timeout expired处理

    一.发现问题 二.分析问题 .net长时间连接mysql导致超时: 方式一:连接用完后,就关闭连接 方式二:增加C#的执行sqlcommand时间 三.解决问题 增加了这一句,问题解决了 using ...

  10. mysql若干问题

    一.Host ip is not allowed to connect to this MySql server 解决方法:这是因为你的账号不允许远程登录,只能在localhost.只要在localh ...