站长资源网页制作 iframe 多层嵌套 无限嵌套 高度自适应的解决方案 整理:jimmy2024/12/23浏览2次 站长资源 网页制作 网盘链接 云盘下载 简介有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应 A页面 复制代码代码如下: <div class="news_infos"><div id="MyContent">有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应 <br>A页面 <br><br><u>复制代码</u>代码如下: <br><body> <br><iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="/UploadFiles/2021-03-30/B页面">onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}"> <br></iframe> <br></body> <br><br>B页面 <br><br><u>复制代码</u>代码如下: <br><body> <br><!--左边--> <br><div style="flost:left;"> <br>左边菜单 <br></div> <br><!--右边--> <br><div style="flost:right;"> <br><iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="/UploadFiles/2021-03-30/C页面"></div> <br></body> <br><br>C页面 <br>将下面这个JS函数写到 最最底层的页面中(即最孙子的那个页面) 并在body的onload事件中调用该方法 【下面这个公式是万能公式】 <br><br><u>复制代码</u>代码如下: <br><script type="text/javascript"> <br>//进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度 <br>function autoHeight(){ <br>var doc = document, <br>p = window; <br>while(p = p.parent){ <br>var frames = p.frames, <br>frame, <br>i = 0; <br>while(frame = frames[i++]){ <br>if(frame.document == doc){ <br>frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // 这里一定要注意 火狐必须要加'px‘ 否则火狐无效 <br>doc = p.document; <br>break; <br>} <br>} <br>if(p == top){ <br>break; <br>} <br>} <br>} <br></script> <br><body onload="autoHeight();"> <br><!--经测试 这个最最最子的页面的body中必须要有一个有高度的div才行 否则上面的自适应生效--> <br><div style="height: 1px;"> <br></div> <br><div style="padding-bottom: 10px;"> <!--这句话也是必不可少的--> <br>这里可以写真正的内容 并且给该div的padding-bottom设一个值 <br></div> <br></body> <br></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="http://m.bwabc.com/show/1/67771.html" title="src或者css背景图的url值为base64编码代码">src或者css背景图的url值为base64编码代码</a></p> <p>下一篇：<a href="http://m.bwabc.com/show/1/67773.html" title="html中br和br/的区别介绍">html中br和br/的区别介绍</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/show/1/622578.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li> <li><a href="/show/1/622577.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/show/1/622576.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/show/1/622575.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/show/1/622574.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/show/1/622573.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/show/1/622572.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li> <li><a href="/show/1/622571.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li> <li><a href="/show/1/622570.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/show/1/622569.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> </article> <footer> <p>友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" 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="/sitemap.xml">SiteMap</a></p> <p>Design by <a href="http://m.bwabc.com">凤求凰客栈</a> <a href="/">http://m.bwabc.com</a></p> </footer> <script src="/images/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>