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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
编写一个javascript元循环求值器的方法
Apr 14 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 定界符 使用技巧
2009/06/14 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python实现图片批量压缩程序
2018/07/23 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python实现Linux监控的方法
2019/05/16 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
自荐信模板大全
2015/03/27 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
理解深度学习之深度学习简介
2021/04/14 Python