深入解析contentWindow, contentDocument

生活永远是一个大染缸，一块白布下去，黑布出来，一块黑布下去，一块七色布出来。
contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。
在子级iframe设置 父级 iframe ，或 孙级 iframe 高度。


代码如下:

function showIframeH(){
    var parentWin = parent.document.getElementById("test");
    if(!parentWin) return false;
    var sub = parentWin.contentWindow.document.getElementById("test2");
    if(!sub) return false;
    var thirdHeight = sub.contentWindow.document.body.offsetHeight; //第三层 body 对象
    sub.height = thirdHeight; //设置第二层 iframe 的高度
    var secondHeight = x.contentWindow.document.body.offsetHeight; //第二层 body 对象
    x.height = secondHeight; //设置第一层 iframe 的高度
    //alert(secondHeight);
    //alert('body: ' + x.contentDocument.body.offsetHeight + ' div:' + thirdHeight);
}

赞 (0)

相关推荐

  • 深入解析contentWindow, contentDocument

    生活永远是一个大染缸,一块白布下去,黑布出来,一块黑布下去,一块七色布出来.contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 document 对象.在子级iframe设置 父级 iframe ,或 孙级 iframe 高度. 复制代码 代码如下: function showIframeH(){    var parentWin = parent.document.getE

  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • JavaScript实现多文件下载方法解析

    对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择"另存为",这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存页面中的多个链接文件,就得重复操作很多次,最常见的就是英语听力网站上的音频下载,手都要点麻! 本文的目的是介绍如何利用 javascript 进行多文件的下载,也就是当用户点击某个链接或者按

  • 详解无界微前端是如何渲染子应用的demo解析

    目录 正文 无界渲染子应用的步骤 创建子应用 iframe 解析入口 HTML 处理 CSS 并重新嵌入 HTML 创建 webComponent 并挂载 HTML JS 的执行细节 简单的实现 将 UI 渲染到 shadowRoot 挟持 document 的属性/方法 副作用的处理 DOM 相关的副作用处理 修正相对 URl 修正 shadowRoot head.body iframe 的副作用处理 History API window/document 属性/事件 location 对象

  • iOS动画解析之支付宝支付打钩动画的实现方法

    iOS动画解析之支付宝支付打钩动画的实现方法

    前言 我们平时在用支付宝付款时,会有一个支付中的动画和一个支付完成的动画.这篇博客主要分析一下这种动画效果,效果如下: 支付宝支付动画 一.动画解析 为了方便观察,放慢了动画的速度并添加辅助线: 放慢后的动画 从图中可以看出:加载圆弧运动轨迹可分为前半段和后半段:并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化: 前半段: 从-0.5π到π,这一段运动中速度较快:StartAngle不变,始终未-0.5π:EndAngle在匀速上升,一直到π:前半段中圆弧

  • Mysql中复制详细解析

    1.mysql复制概念 指将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在复制服务器上将这些日志文件重新执行,从而使复制服务器和主服务器的数据保持同步.复制过程中一个服务器充当主服务器(master),而一个或多个其它服务器充当从服务器(slaves).主服务器将更新重新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环.这些日志可以记录发送到从服务器的更新.当一个从服务器连接主服务器时,它通知主服务器.从服务器在日志中读取的最后一次成功更新的位置.从服务器接受从那时起发

  • Redis的主从同步解析

    一.Redis主从同步原理 1.1 Redis主从同步的过程 配置好slave服务器连接的master后,slave会建立和master的连接,然后发送sync命令.无论是第一次同步建立的连接还是连接断开后的重新连接,master都会启动一个后台进程,将数据库快照保存到文件中.同时master主进程会开始收集新的写命令并缓存起来.当后台进程完成写文件后,master就将快照文件发送给slave,slave将文件保存到磁盘上,然后加载到内存将数据库快照恢复到slave上.slave完成快照文件的恢

  • 远程数据库的表超过20个索引的影响详细解析

    昨天同事参加了一个研讨会,有提到一个案例.一个通过dblink查询远端数据库,原来查询很快,但是远端数据库增加了一个索引之后,查询一下子变慢了. 经过分析,发现那个通过dblink的查询语句,查询远端数据库的时候,是走索引的,但是远端数据库添加索引之后,如果索引的个数超过20个,就会忽略第一个建立的索引,如果查询语句恰好用到了第一个建立的索引,被忽略之后,只能走Full Table Scan了. 听了这个案例,我查了一下,在oracle官方文档中,关于Managing a Distributed

  • jq源码解析之绑在$,jQuery上面的方法(实例讲解)

    1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit

  • Ajax中解析Json的两种方法对比分析

    eval();  //此方法不推荐 JSON.parse();  //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name":"周星驰","age":23 }' var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法 var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方

随机推荐