父页HTML:

<iframe  id="mainframe" name="mainframe"  style="width:100%;" marginheight="0" marginwidth="0" onLoad="iFrameHeight()"  scrolling="auto" frameborder="0"   src="Index.aspx"></iframe>

父页JS:

<script src="../Scripts/js/jquery-2.1.1.min.js"></script>

<script>
        function iFrameHeight() {
            var ifm = document.getElementById("mainframe");
            var subWeb = document.frames ? document.frames["mainframe"].document : ifm.contentDocument;
            if (ifm != null && subWeb != null) {
                ifm.height = document.body.offsetHeight;
                ifm.width = subWeb.body.scrollWidth;
            }
        }
    </script>

子页JS

<script src="../Scripts/js/jquery-2.1.1.min.js"></script>

<script>

$(window.parent.document).find("#mainframe").load(function () {
      var ifm = window.parent.document.getElementById("mainframe");
      var subWeb = window.parent.document.frames ? window.parent.document.frames["mainframe"].document : ifm.contentDocument;
      if (ifm != null && subWeb != null) {
           ifm.height = subWeb.body.offsetHeight + 20;               //预留出灵活高度20px
          ifm.width = subWeb.body.scrollWidth;
      }
    
  });

</script>

iframe父页面和子页面高度自适应的更多相关文章

  1. 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  2. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  3. iframe父页面与子页面赋值

    最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...

  4. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  5. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  6. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  7. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  8. js里父页面与子页面的相互调用

    一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...

  9. JavaScript从父页面获取子页面的值(子页面又如何访问父页面)

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  10. Jquery父页面和子页面的相互操作

    //父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $(" ...

随机推荐

  1. 使用sql追踪

    在会话层面使用sql追踪 1.查看sql追踪默认文件位置 2.设置trace文件名 alter session set tracefile_identifier='ymtrace001'; trace ...

  2. IDEA中Java目录结构

    IDEA中Java的目录结构 1.首先新建Project,选择Empty,新建空的项目 2.选择Module时候,需要选择JDK,JDK只需要选择到Java Home目录就可以了 3.创建好Modul ...

  3. P5445 [APIO2019]路灯

    传送门· 对于询问 $(a,b)$ ,感觉一维很不好维护,考虑把询问看成平面上的一个点,坐标为 $(a,b)$ 每个坐标 $(x,y)$ 的值表示到当前 $x$ 和 $y$ 联通的时间和 考虑一个修改 ...

  4. PHP实现简单的万年历

    <?php /*********************** *** 功能:万年历 *** *** 时间:2015/05/23 *** ***********************/ //1. ...

  5. c# ASP.NET MVC easyui-filebox 图片上传和显示

    原文:https://www.cnblogs.com/huatao/p/4727398.html https://www.cnblogs.com/weiweithe/p/4363458.html 表单 ...

  6. 跨域问题解决----NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost:11000' is therfore not allowed access'

    NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost ...

  7. 行人重识别(ReID) ——基于Person_reID_baseline_pytorch修改业务流程

    下载Person_reID_baseline_pytorch地址:https://github.com/layumi/Person_reID_baseline_pytorch/tree/master/ ...

  8. 本地主机访问远程linux系统服务器上的jupyter notebook

    1,机器情况:服务器 centos python环境已经配置好了,在虚拟环境下安装了anaconda 并且在里面安装了jupyter notebook 2,主机是 windows     ipytho ...

  9. linux命令中chmod 777 以及drwxr-xr-x分别代表什么意思

    最近跟一个运维人员学了点新东西,感觉以前没怎么注意,但现在感觉很有用,特来记录一下. linux使用==ll==命令列出列表的时候,前面总是有一堆drwxr-xr-x ,这些代表什么意思从来还没有去在 ...

  10. TCP窗口

    一.窗口移动1.在建立TCP连接时,接收端会告诉发送端自己的接收窗口.2.发送端在发送数据时,会先为数据分包,编号,然后先发送窗口大小的数据(数据大于窗口大小),小于则全部发送了,窗口后的不允许发送. ...