很多管理系统中,都使用iframe进行信息内容的展示方式,或者作为主菜单的链接展示内容。
使用iframe的问题就是自适应高度的问题。
iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可。代码如下:
//公共方法:设置iframe的高度以保证全部显示数据 var iframeLoaded = function (iframe) { if (iframe.src.length > 0) { if (!iframe.readyState || iframe.readyState == "complete") { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; } } } //分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id var reSetIframeHeight = function(){ try { var oIframe = parent.document.getElementById(window.name); oIframe.height = 100; iframeLoaded(oIframe); } catch (err){ try { parent.document.getElementById(window.name).height = 1000; } catch (err2) { } } }
调用reSetIframeHeight();方法即可。
但是还有一种情况就是使用jquery ajax请求数据,数据都是在body load完成后,还在进行http请求,这时候没有数据占据窗口高度,reSetIframeHeight方法无法计算出来高度。
这时候,我们想到一个方法:ajax什么时候能够执行完成,当然是Complete事件是执行完成。
但是我们也不能在每一个页面里的ajax Complete事件中添加处理。这里就用到了jquery ajax的全局变量。
这里有介绍:[Jquery $.ajax请求详解及ajax全局变量分析]
处理ajax和iframe自适应的代码:
var sendcount = 0; var completecount = 0; // 添加ajax全局事件处理。 reSetIframeHeight(); $(document).ajaxStart(function (a, b, c) { }).ajaxSend(function (e, xhr, opts) { sendcount++; }).ajaxError(function (e, xhr, opts) { }).ajaxSuccess(function (e, xhr, opts) { }).ajaxComplete(function (e, xhr, opts) { completecount++; reSetIframeHeight(); }).ajaxStop(function () { });
先执行一下reSetIframeHeight,再在每个ajax完成后调用reSetIframeHeight。
原文出处:http://www.suchso.com/projecteactual/jquery-ajax-iframe-resetiframeheight.html
相关文章:http://xiaosa.blog.51cto.com/665033/1227753
相关推荐
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe自适应高度和宽度
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
多层嵌套iframe 自适应高度的解决方法
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe自适应高度(兼容多种浏览器) 亲测可以
iframe自适应高度的简单解决办法,word文档中有详细的解释,赶快下载吧!
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
iframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txt
很多管理系统中,都使用iframe进行信息内容的展示方式,或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...
iframe自适应高度
iframe自适应高度 .doc
javascript iframe 自适应高度js demo
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。