嵌套自适应调整所有iframe的高度
嵌套遍历所有的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 }
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 }
2 var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
3 $(iframe).height(iframeHeight);
4 }