站长资源网络编程 JS解决iframe之间通信和自适应高度的问题 整理:jimmy2026/8/3浏览2次 站长资源 网络编程 网盘链接 云盘下载 简介首先说明下，iframe通信 分为：同域通信 和 跨域通信。一、 同域通信所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe比如： <div id="MyContent"><p>首先说明下，iframe通信 分为：同域通信 和 跨域通信。</p> <p>一、 <strong>同域通信</strong></p> <p>所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe</p> <p>比如： <iframe src="/UploadFiles/2021-04-02/iframeB.html">document.getElementById('iframeA').contentWindow.b(); </code>这种方法，其中b 是子页面B.html中的一个函数。但是这样调用下有个问题我纠结了很久，就是既然在火狐下报这样的错误, 如下：</p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016824170414765.png');"><img src="/UploadFiles/2021-04-02/2016824170414765.png" alt="JS解决iframe之间通信和自适应高度的问题" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>b不是个函数 但是我在子页面明明定义了这么一个函数，那么为什么会报这样的错误呢？经过仔细分析及google，发现有这么一个问题需要理解，当iframe没有加载完成后 我就去执行这个js会报这样的错误，所以就试着在火狐下 用<code>iframe.onload </code>这个函数 进行测试，果然没有报错，是正确的 所以就确定是这个问题。所以就想写个兼容IE和火狐 google写个函数 来确定iframe已经加载完成！，其实给个回调函数来调用我们上面的方法。</p> <p><strong>综合上面的思路 就可以写个这样的代码：</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <iframe src="/UploadFiles/2021-04-02/iframeB.html"> <p><strong>B.html 代码如下：</strong></p> <div class="htmlcode"> <pre class="brush:js;"> var b = function(){ alert("B"); }</pre> </div> <p>子页面调用父页面的函数很简单，只要这样搞下就ok了，<code>window.parent.A();</code></p> <p>子页面取父页面元素的值： <code>window.parent.document.getElementById("topName").innerHTML</code>等方法。</p> <p><strong>二： iframe跨域通信。</strong></p> <p> iframe跨域访问一般分为2种情况，<strong>第一种是同主域，不同子域的跨域。 第二种是：不同主域跨域。</strong></p> <p><strong>1、 是同主域下面，不同子域之间的跨域；可以通过document.domain 来设置相同的主域来解决。</strong></p> <p>假如现在我有个域 abc.example.com 下有个页面叫abc.html, 页面上嵌套了一个iframe 如下：<iframe src="/UploadFiles/2021-04-02/def.html">function test(){console.log(1);}; </code>我想在子页面调用这个函数 还是按照上面的同域方式调用 <code>parent.test();</code>这样，通过在火狐下看 已经跨域了 解决的办法是 在各个js函数顶部 加一句 <code>document.domain = 'example.com'</code>，就可以解决了。</p> <p><strong>abc.html代码如下：<br> </strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <iframe src="/UploadFiles/2021-04-02/def.html"> <p><strong>def.html代码如下：</strong></p> <div class="htmlcode"> <pre class="brush:js;"> /* * 子页调用父页的方法 */ document.domain = 'example.com'; //window.top.test(); window.parent.test();</pre> </div> <p>还是这两个页面 我想父页调用子页 如下方法：<br> </p> <p><strong>a.html代码如下：</strong></p> <div class="htmlcode"> <pre class="brush:js;"> /* * 跨域 父页想调用子页的的函数 */ document.domain = 'example.com'; var iframe = document.getElementById('iframe2'); iframeIsLoad(iframe,function(){ var obj = iframe.contentWindow; obj.child(); }); function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) { iframe.attachEvent('onload',function(){ callback && callback(); }); }else { iframe.onload = function(){ callback && callback(); } } }</pre> </div> <p><strong>假如现在def.html页面有个child函数 代码如下：</strong></p> <div class="htmlcode"> <pre class="brush:js;"> document.domain = 'example.com'; function child(){console.log('我是子页');}</pre> </div> <p>就可以跨域调用了 不管是子页面调用父页面 还是父页面调用子页面。一切ok！</p> <p><strong>2、 是不同主域跨域；</strong></p> <p> 虽然google有几种方法关于不同主域上的跨域问题 有通过<code>location.hash</code>方法或者<code>window.name</code>方法或者html5及flash等等，但是我觉得下面iframe这种方法值得学习下，</p> <p>如下图所示：域a.com的页面request.html（即http://a.com/demo/ajax/ajaxproxy/request.html）里面嵌套了一个iframe指向域b.com（http://b.com/demo/ajax/ajaxproxy/response.html）的response.html，而response.html里又嵌套了域a.com的proxy.html。</p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016824170845718.png');"><img src="/UploadFiles/2021-04-02/2016824170845718.png" alt="JS解决iframe之间通信和自适应高度的问题" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p>思路：要实现a.com域下的request.html页面请求域b.com下的process.php,可以将请求参数通过url传给response.html,由response.html向process.php发起真正的ajax请求（response.html与process.php都属于域b.com），然后将返回的结果通过url传给proxy.html，最后由于proxy.html和request.html是在同个域下，所以可以在proxy.html利用window.top 将结果返回在request.html完成真正的跨域。</p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016824170920143.png');"><img src="/UploadFiles/2021-04-02/2016824170920143.png" alt="JS解决iframe之间通信和自适应高度的问题" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p><strong>ok, 先看看页面结构</strong></p> <p>a.com域下有：</p> <p> request.html</p> <p> proxy.html</p> <p>b.com域下有：</p> <p> response.html</p> <p> process.php</p> <p>先来看看request.html页面如下：</p> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE HTML> <html> <head> <title> New Document </title> </head> <body> <p id="result">这里将会填上响应的结果</p> <a id="sendBtn" href="javascript:void(0)">点击，发送跨域请求</a> <iframe id="serverIf" style="display:none"></iframe> <script> document.getElementById('sendBtn').onclick = function() { var url = 'http://b.com/demo/ajax/ajaxproxy/reponse.html', fn = 'GetPerson', //这是定义在response.html的方法 reqdata = '{"id" : 24}', //这是请求的参数 callback = "CallBack"; //这是请求全过程完成后执行的回调函数，执行最后的动作 CrossRequest(url, fn, reqdata, callback); //发送请求 } function CrossRequest(url,fn,reqdata,callback) { var server = document.getElementById('serverIf'); server.src = url + '"&data=" +encodeURIComponent(reqdata) + "&callback="+encodeURIComponent(callback); } //回调函数 function CallBack(data) { var str = "My name is " + data.name + ". I am a " + data.sex + ". I am " + data.age + " years old."; document.getElementById("result").innerHTML = str; } </script> </body> </html></pre> </div> <p> 这个页面其实就是要告诉response.html：我要让你执行你定义好的方法<code>GetPerson</code>，并且要用我给你的参数'{"id" : 24}'。response.html纯粹是负责将<code>CallBack</code>这个方法名传递给下一位仁兄proxy.html，而proxy.html拿到了<code>CallBack</code>这个方法名就可以执行了，因为proxy.html和request.html是同域的。</p> <p><strong>response.html代码如下： </strong> </p> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE HTML> <html> <head> <title> New Document </title> </head> <body> <iframe id="proxy"></iframe> <script> // 通用方法 ajax请求 function _request (reqdata,url,callback) { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var data = xmlhttp.responseText; callback(data); } } xmlhttp.open('POST',url); xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8"); xmlhttp.send(reqdata); } // 通用方法 获取url参数 function _getQuery(key) { var query = location.href.split('"=")[1].split("&")[0]); return value; } //向process.php发送ajax请求 function GetPerson(reqdata,callback) { var url = 'http://b.com/demo/ajax/ajaxproxy/process.php'; var fn = function(data) { var proxy = document.getElementById('proxy'); proxy.src = "http://a.com/demo/ajax/ajaxproxy/Proxy.html" + encodeURIComponent(data) + "&callback=" + encodeURIComponent(callback); }; _request(reqdata, url, fn); } (function(){ var fn = _getQuery('fn'), reqdata = _getQuery("data"), callback = _getQuery("callback"); eval(fn + "('" + reqdata +"', '" + callback + "')"); })(); </script> </body> </html></pre> </div> <p> 这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求，然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。 </p> <p><strong>接下来看看php代码如下</strong>，其实就是想返回一个json数据：</p> <div class="htmlcode"> <pre class="brush:php;"> <"php://input")); header("Content-Type: application/json; charset=utf-8"); echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}'); "htmlcode"> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE HTML> <html> <head> <title> New Document </title> </head> <body> <script> function _getUrl(key) {//通用方法，获取URL参数 var query = location.href.split("")[1], value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]); return value; } (function() { var callback = _getUrl("callback"), data = _getUrl("data"); eval("window.top." + decodeURIComponent(callback) + "(" + decodeURIComponent(data) + ")"); })(); </script> </body> </html></pre> </div> <p> 这里也是最后一步了，proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据，利用window.top执行request.html里定义的回调函数。</p> <p><strong>三、iframe高度自适应的问题。</strong></p> <p> iframe高度自适应分为2种，<strong>一种是同域下自适应 另外一种是跨域下自适应</strong>，下面我们来看看同域下iframe高度自适应的问题。</p> <p> <strong>1.同域下iframe高度自适应的问题：</strong></p> <p> 思路：获取被嵌套iframe元素，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。</p> <p>假如我们demo有iframe1.html和iframe2.html</p> <p><strong>下面贴上iframe1.html代码如下：</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE HTML> <html> <head> <title> New Document </title> <style> *{margin:0;padding:0;} </style> </head> <body> <iframe src="/UploadFiles/2021-04-02/iframe2.html"> <p><strong>iframe2.html</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE HTML> <html> <head> <title> New Document </title> <style> *{margin:0;padding:0;} </style> </head> <body> <div style="height:500px;"></div> </body> </html></pre> </div> <p>就可以动态设置iframe1页面的高度为iframe2的高度了。</p> <p><strong> 2. 跨域下iframe高度自适应的问题。</strong></p> <p> 首先我们知道iframe跨域我们是不能用上面js方式来控制了，所以我们只能用个中间键 我们可以在a.com域下iframe1.html页面嵌套一个b.com域下的iframe2.html页面，然后我在iframe2.html页面嵌套个和iframe1.html相同域的iframe3.html页面了，这样的话 iframe1.html和iframe3.html就可以无障碍的进行通信了，因为页面iframe2.html嵌套iframe3.html，所以iframe2.html可以改写iframe3.html的href值。</p> <p><strong> iframe1中的内容：</strong></p> <p> iframe1.html内容主要接受iframe3.html页面传过来的内容并且去完成相应的操作。iframe1.html代码如下：</p> <div class="htmlcode"> <pre class="brush:xhtml;"> <iframe src="/UploadFiles/2021-04-02/iframe2.html"> <p><strong>iframe2.html中的内容：</strong></p> <p> iframe2.html内容是怎么把值传给iframe3.html页面，刚才说了是将值传递到iframe3.html页面的href中，所以只要修改iframe的src就可以，因为不用刷新C页面，所以可以用过hash的方式传递给iframe3.html页面.iframe2.html代码如下：</p> <div class="htmlcode"> <pre class="brush:xhtml;"> <!DOCTYPE HTML> <html> <head> <title> New Document </title> <style> *{margin:0;padding:0;} </style> </head> <body> <iframe id="iframe" src="/UploadFiles/2021-04-02/iframe3.html"> <p> 可以看到 默认情况下 iframe1.html 页面我给iframe2.html的高度是200像素 但是在iframe2.html我给iframe3.html高度是230像素，那么正常情况下是有滚动条的，那么现在我是想在iframe2.html获取滚动条的高度，把高度传给通过iframe3.html的src里面去，然后在iframe3.html页面里获取这个高度值 传给iframe1.html(因为iframe1.html和iframe3.html是同域的)，所以iframe1.html能取到这个高度值，再设置下本身的高度就是这个值就ok了。</p> <p> iframe3.html页面的唯一功能就是接收iframe2.html页面通过href传进来的值并且传递给iframe1.html页面，可到iframe2.html页面传来的值可以通过一个定时器不停去查看location.href是 否被改变，但是这样感觉效率很低，还有个方式就是在新的浏览器中通过<code>onhashchange</code>事件 （IE8+,Chrome5.0+,Firefox3.6+,Safari5.0+,Opera10.6+）来监听href的改变。</p> <p><strong>iframe3.html代码如下：</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <script> var oldHeight = 0; t && clearInterval(t); var t = setInterval(function(){ var height = location.href.split('#')[1]; if(height && height != oldHeight) { oldHeight = height; if(window.parent.parent.getIfrData) { window.parent.parent.getIfrData(oldHeight); } } },200); </script></pre> </div> <p>这样就可以解决通过跨域实现iframe自适应高度的问题了。</p> <p><strong>四、总结</strong></p> <p>以上就是本文的全部内容了，希望对大家的学习工作能有所帮助。如果有疑问可以留言讨论。</p></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="/3g/1/105922.html" title="微信JS接口大全">微信JS接口大全</a></p> <p>下一篇：<a href="/3g/1/105924.html" title="浅析Javascript ES6新增值比较函数Object.is">浅析Javascript ES6新增值比较函数Object.is</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li> <li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li> <li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li> <li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li> </ul> </div> </div> <div class="sidebar"> <div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div> </div> <div class="sidebar"> 友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a> </div> </article> <footer> <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p> </footer> <script src="/images3g/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>