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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
javascript每日必学之运算符
Feb 16 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
javascript 内存模型实例详解
Apr 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 pthreads多线程的安装与使用
2016/01/19 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
什么是JavaScript
2009/08/13 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
JQuery live函数
2010/12/24 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
Python base64编码解码实例
2015/06/21 Python
浅谈Python的异常处理
2016/06/19 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
django 环境变量配置过程详解
2019/08/06 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python求解汉诺塔游戏
2020/07/09 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
房地产开发项目建议书
2014/05/16 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
色戒观后感
2015/06/12 职场文书
法人身份证明书
2015/06/18 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript