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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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实现自动登入google play下载app report的方法
2014/09/23 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python中的默认参数实例分析
2018/01/29 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python dict 相同key 合并value的实例
2019/01/21 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
法律工作求职自荐信
2013/10/31 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电