iframe通信问题及自适应高度

来源：互联网发布：windows系统是什么编辑：程序博客网时间：2024/06/05 20:23

前言：最近在编写html5-handbook时遇到ifarme自适应高度问题，查看了众多技术大牛的博文，在此总结如下：

iframe通信问题(服务器端访问)

iframe同域通信

实例主页面调用iframe页面函数
主页面

<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title>frame自适应高度</title></head><body>    <div id="test">我是主页面</div>        <iframe src="iframe.html" id="iframe" width="100%" frameborder="0"></iframe><script type="text/javascript">    function A(){        alert("A");    }    //iframe加载完毕执行回调函数    function iframeIsLoad(iframe,callback){        if(iframe.attachEvent){            iframe.attachEvent('onload',function(){                callback && callback();            });        }else{            iframe.onload = function(){                callback && callback();            }        }    }    var iframe = document.getElementById('iframe');    iframeIsLoad(iframe,function(){        var object = document.getElementById('iframe').contentWindow;        object.b();    });</script></body></html>

iframe页面

<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title>frame自适应高度</title></head><body> <p>我是iframe<p>  <script type="text/javascript">    function b(){        alert("b");    }    self.parent.A();    alert(self.parent.document.getElementById("test"));</script></body></html>

通过子页面操作父页面
执行函数：self.parent.A()
获取元素：self.parent.document.getElementById(“id”);
执行顺序显而易见！

iframe跨域通信

本人知识有限，暂不讨论

iframe自适应高度

同域自适应高度

方法一思路：在iframe页面获取被嵌套iframe元素，通过JavaScript取得被嵌套页面最终高度；调用主页面函数进行设置iframe高度
注意
iframe页面获取高度，本人在这范二了；不过即使发现。页面高度参考
主页面

<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title>frame自适应高度</title></head><body>    <div id="test">我是主页面</div>        <iframe src="iframe1.html" id="iframe" width="100%"></iframe><script type="text/javascript">    function iframeAutoHeight(height){        var iframe = document.getElementById("iframe");        iframe.style.height = height + "px";    }</script></body></html>

iframe页面

<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title>frame自适应高度</title></head><body> <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  <p>我是iframe<p>  </body><script type="text/javascript">    var iframeBodyHeight = document.body.scrollHeight;    self.parent.iframeAutoHeight(iframeBodyHeight);</script></html>

方法二思路：在iframe页面获取自身document.body.scrollHeight函数；回调函数进行设置iframe高度
时间有限，方法二代大家可以自己试试

跨域自适应高度

本人知识有限，暂不讨论

参考：
龙恩0707
代码：
Aidan Dai

0 0