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

1、父页面获取子页面的高度，并给父页面赋值

父页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="myhtml">

        <iframe src="./bbb.html" frameborder="0" id="ifram"></iframe>

    </div>

</body>

</html>

<script>

    function setIframeHeight(id){

        var iframe = document.getElementById(id);

        try{

            if(iframe.attachEvent){

                iframe.attachEvent("onload", function(){

                    iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;

                });

                return;

            }else{

                iframe.onload = function(){

                    var obj = ifram.contentDocument || ifram.contentWindow.document;

                    iframe.height = obj.body.scrollHeight+16;

                };

                return;

            }

        }catch(e){

            throw new Error('setIframeHeight Error');

        }

    }

    setIframeHeight("ifram");

</script>

<style>

    #ifram {

        width: 300px;

        border: 1px solid #ccc;

    }

</style>

iframe里面的元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test">lalalalala</div>

</body>

</html>

<style>

    #test {

        height: 1000px;

    }

</style>

小结：为什么要加16，试验了一下刚好差一个滚动条的高度，为了不出现双滚动条，只能再把他的高加了一点。

另外只测试了chrome，在chrome下直接是不好使的，需要自己起一个服务，才不报错，这在同源下做了测试。

2、子页面给父页面赋值

父页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="myhtml">

        <iframe src="./bbb.html" frameborder="0" id="ifram"></iframe>

    </div>

</body>

</html>

<style>

    #ifram {

        width: 300px;

        border: 1px solid #ccc;

    }

</style>

iframe里面的元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test">lalalalala</div>

</body>

</html>

<script>

function setParentIframeHeight(id){

    try{

        var parentIframe = parent.document.getElementById(id);

         if(window.attachEvent){

            window.attachEvent("onload", function(){

                parentIframe.height = document.documentElement.scrollHeight;

            });

            return;

        }else{

            window.onload = function(){

                parentIframe.height = document.body.scrollHeight;

            };

            return;

        }

    }catch(e){

        throw new Error('setParentIframeHeight Error');

    }

}

setParentIframeHeight("ifram");

</script>

<style>

    #test {

        height: 1000px;

    }

</style>

小结：通过parent.document.getElementById();  id是父页面的id赋值，同样只适用于同源

iframe父页面与子页面赋值的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. layui 或者layer 父页面获取子页面数据 或者子页面获取父页面操作方法

    var frameId = $(layero).find("iframe").attr('id');//父页面获取子页面的iframe var id = $(window.fram ...

  8. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

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

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

随机推荐

  1. 传输层的端口与TCP标志中的URG和PSH位

    一.协议端口号的提出 运输层提供了进程间通信的能力(即端-端通信).但是不同的操作系统可能无法识别其他机器上的进程.为了用统一的方法对 TCP/IP体系的应用进程进行标志,使运行不同操作系统的计算机的 ...

  2. creating server tcp listening socket 127.0.0.1:6379: bind No error

    参考链接:https://blog.csdn.net/n_fly/article/details/52692480 1.window10环境下面安装的redis,之前安装好弄了一下,过了好几天,再次使 ...

  3. .net OADate 转javascript的Datetime js 5位 日期 转换

    以下是将.net的OADate转成javascript的DateTime函数. 其中参数oadate是.net那里传过来的UTC时间的double.记得 一定是UTC时间. .net Double o ...

  4. tensorflow会话控制-【老鱼学tensorflow】

    在tensorflow中,当定义好结构后,就要通过tf.session()来建立运行时的会话. 本例子应该不难理解,我们用tensorflow来计算一下一个1行2列的矩阵和2行1列矩阵的乘积: imp ...

  5. Linux查看设备命令

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  6. UOJ#185. 【ZJOI2016】小星星 容斥原理 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ185.html 题解 首先暴力DP是 $O(3^nn^3)$ 的,大家都会. 我们换个方向考虑. 假设我们 ...

  7. 初识Python,简单初学代码

    第一个自己手写的代码~ If 与 Elif #!/usr/bin/env python # - * - coding:uft8 - * - Inp = input ( '请输入你的会员级别' ) if ...

  8. TreeMap 的排序冲突吗

    今天在网上看到一个问题:一个已经构建好的 TreeSet,怎么完成倒排序? 网上给出的答案是: 通过TreeSet构造函数传入一个比较器,指定比较器进行排序为原排序的倒叙. TreeSet的自然排序是 ...

  9. jsp填坑：找不到属性

    javax.el.PropertyNotFoundException: Property [***] not found on type 接手的项目的页面是用jsp写的,虽然再有十几天就2019年了, ...

  10. python ironicclient源码分析

    ironicclient是一个cli工具,用来和用户交互的. 首先写一个简单的例子,获取ironic所有的node节点: from ironicclient import client if __na ...