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控制iframe滚动的代码
Apr 10 Javascript
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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+mysql分页代码详解
2008/03/27 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
工作时间上网检讨书
2014/02/03 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Pytest中conftest.py的用法
2021/06/27 Python