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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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代码书写习惯优化小结
2013/06/20 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PDO::commit讲解
2019/01/27 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
保密工作责任书
2014/04/16 职场文书
对教师的评语
2014/04/28 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
python基础之错误和异常处理
2021/10/24 Python
python装饰器代码解析
2022/03/23 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers