父页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. Linux快速访问多个目录

    Linux下实现多个目录之间快速切换 dirs -v # 显示栈目录dirs -c # 清空栈目录 pushd # 加入当前目录pushd director   #  加入指定目录pushd +/-i ...

  2. Python 中三大框架各自的应用场景??

    django:主要是用来搞快速开发的,他的亮点就是快速开发,节约成本,正常的并发量不过 10000,如果要实现高并发的话,就要对 django 进行二次开发,比如把整个笨重的框架给拆掉,自己写 soc ...

  3. TypeScript从入门到Vue项目迁移

    1. 前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查.表达方式灵活,多人协作代码调试和维护成本高 2. 定义 TypeScript 是 JavaScript ...

  4. menustrip

    在对应菜单上点击鼠标右键,插入,SEPARATOR 就可以了,然后可以选中拖动位置.

  5. GitHub上更新原有的项目代码(二)

    转载自:https://blog.csdn.net/dayewandou/article/details/79175783 项目上传了,现在又写了一些内容想要跟新到项目上去,怎么更新呢? 首先进入项目 ...

  6. em、rpx和px的换算

    rpx:对于小程序开发,所用的单位都是rpx,而不论哪个型号的手机,屏幕宽度都是750rpxrpx与px的转换,根据设计稿换算例如:设计稿750px宽度,ps上量出或者标出的宽度是多少,那么就定义多少 ...

  7. ajax图片上传(asp.net +jquery+ashx)

    一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile=&q ...

  8. Route的exact属性

    exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些. exact的值为bool型,为true时表示严格匹配,为false时为正常匹 ...

  9. C# Windows Services 启动和结束其它进程

    将exe所在的绝对路径和进程名配置到配置文件中 <add key="FilePath" value="D:\ABC\ABCD.Console.exe"/& ...

  10. Vue的自定义滚动,我用el-scrollbar

    弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的--)链接地址:Front-End-Basics 此篇文章的地址:Vue的自定义滚动,我用el-scrollbar 基础笔 ...