jquery ajax应用中iframe自适应高度问题解决方法


Posted in Javascript onApril 12, 2014

iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可。

代码如下:

//公共方法:设置iframe的高度以保证全部显示数据
//function SetPageHeight() {
//    var iframe = getUrlParam('ifname');
//    var myiframe = window.parent.document.getElementById(iframe);
//     iframeLoaded(myiframe);
//}
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的全局变量。

处理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。

经过测试有效。

Javascript 相关文章推荐
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
JS中min函数实例讲解
Feb 18 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 #Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 #Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 #Javascript
瀑布流布局代码一例
Apr 11 #Javascript
javascript读写json示例
Apr 11 #Javascript
javascript如何判断输入的url是否正确
Apr 11 #Javascript
javascript判断office版本示例
Apr 11 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
一个捕获函数输出的函数
2007/02/14 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php计算函数执行时间的方法
2015/03/20 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python绘制3D图形
2018/05/03 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
舞蹈兴趣小组活动总结
2014/07/07 职场文书
话题作文之学会尊重
2019/12/16 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript