站长资源网页制作 iframe 多层嵌套 无限嵌套 高度自适应的解决方案 整理:jimmy2024/7/3浏览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.paidiu.com/show/1/67771.html" title="src或者css背景图的url值为base64编码代码">src或者css背景图的url值为base64编码代码</a></p> <p>下一篇：<a href="http://m.paidiu.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/609317.html" title="许慧欣.2006-谜【上华】【WAV+CUE】">许慧欣.2006-谜【上华】【WAV+CUE】</a></li> <li><a href="/show/1/609316.html" title="绝区零珂蕾妲驱动盘怎么搭配 珂蕾妲驱动盘">绝区零珂蕾妲驱动盘怎么搭配 珂蕾妲驱动盘</a></li> <li><a href="/show/1/609315.html" title="绝区零强袭鸣徽有哪些 绝区零强袭鸣徽效果">绝区零强袭鸣徽有哪些 绝区零强袭鸣徽效果</a></li> <li><a href="/show/1/609314.html" title="魔兽世界奥格瑞玛怎么去幽暗城 奥格瑞玛去">魔兽世界奥格瑞玛怎么去幽暗城 奥格瑞玛去</a></li> <li><a href="/show/1/609313.html" title="《间谍过家家日记大作战》成就攻略一览">《间谍过家家日记大作战》成就攻略一览</a></li> <li><a href="/show/1/609312.html" title="完美的音乐品质-群星《红酒杯发烧酒廊情歌">完美的音乐品质-群星《红酒杯发烧酒廊情歌</a></li> <li><a href="/show/1/609311.html" title="群星.2011《高雄国际Hi-End音响大展纪念发">群星.2011《高雄国际Hi-End音响大展纪念发</a></li> <li><a href="/show/1/609310.html" title="康康1999-催泪[阿尔法][WAV+CUE]">康康1999-催泪[阿尔法][WAV+CUE]</a></li> <li><a href="/show/1/609309.html" title="和守望先锋太像？《星鸣特攻》开发商:我们">和守望先锋太像？《星鸣特攻》开发商:我们</a></li> <li><a href="/show/1/609308.html" title="速通玩家有福了！夏季游戏速通大会正在火热">速通玩家有福了！夏季游戏速通大会正在火热</a></li> </ul> </div> </div> <div class="sidebar"> </div> </article> <footer> <p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.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>