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 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
JS验证码实现代码
Sep 14 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
js实现抽奖的两种方法
Mar 19 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python实现360的字符显示界面
2014/02/21 Python
Python全局变量操作详解
2015/04/14 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
运动会通讯稿50字
2014/01/30 职场文书
工程招投标邀请书
2014/01/30 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2014年电工工作总结
2014/11/20 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
python创建字典及相关管理操作
2022/04/13 Python