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 相关文章推荐
用jquery来定位
Feb 20 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
gojs实现蚂蚁线动画效果
Feb 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 高手之路(三)
2006/10/09 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python实现贪吃蛇双人大战
2020/04/18 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
开业主持词
2014/03/21 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
保密协议书范本
2014/04/22 职场文书
出国英文推荐信
2014/05/10 职场文书
庆七一宣传标语
2014/10/08 职场文书
小型婚礼主持词
2015/06/30 职场文书
党组织结对共建协议书
2016/03/23 职场文书
Django实现翻页的示例代码
2021/05/24 Python
mysql数据库如何转移到oracle
2022/12/24 MySQL