嵌套自适应调整所有iframe的高度

最新推荐文章于 2024-09-29 16:33:00 发布

weixin_30629977

最新推荐文章于 2024-09-29 16:33:00 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/viewercq/archive/2010/04/23/1718672.html

本文介绍了一种方法，用于使iframe能够根据其内部文档的高度自动调整自身高度，确保内容完全显示且不产生多余空白。该方法在多种主流浏览器上进行了测试，并提供了两种实现方式：定时调整与加载时调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌套遍历所有的iframe，每个根据其包含的document的高度自适应调整包含此iframe的高度，在IE,ff,safafi,chrome中测试通过

1 function adjustIFramesHeight(win) {
2     for (var i = 0; i < win.frames.length; i++) {
3         adjustIFramesHeight(win.frames[i]);
4         //执行的时候有可能此iframe还没有加载document
5         if (win.frames[i].window.document.body) {
6             //基于webkit核心的浏览器safari/chrome与IE,ff对document.documentElement.scrollHeight和document.body.scrollHeight的值的设置刚好相反，取最小值以便在iframe拉高后可以缩短
7             $(win.frames[i].frameElement).height(Math.min(win.frames[i].window.document.documentElement.scrollHeight, win.frames[i].window.document.body.scrollHeight));
8         }
9     }
10 }

调用方法是用每隔一秒执行一次这个函数，虽然有些浪费客户端的cpu

1 setInterval(function() { adjustIFramesHeight(top); }, 1000);

也可以在iframe的onload的时候进行调整：

1 function adjustIFramesHeightOnLoad(iframe) {
2 var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
3 $(iframe).height(iframeHeight);
4 }

转载于:https://www.cnblogs.com/viewercq/archive/2010/04/23/1718672.html