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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
JavaScript如何判断对象有某属性
Jul 03 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
CodeIgniter CLI模式简介
2014/06/17 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
php实现简单四则运算器
2020/11/29 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
Three.js学习之网格
2016/08/10 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
如何在python中判断变量的类型
2020/07/29 Python
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
大学英语演讲稿范文
2014/04/24 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年母亲节寄语
2015/03/23 职场文书
学校捐书倡议书
2015/04/27 职场文书
如何写好闭幕词
2019/04/02 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server