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-世界上误解最深的语言分析
Aug 12 Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 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
3种平台下安装php4经验点滴
2006/10/09 PHP
php页面缓存方法小结
2015/01/10 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python3 replace()函数使用方法
2018/03/19 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
pytorch permute维度转换方法
2018/12/14 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
巴西网上药房:onofre
2016/11/21 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
授权委托书怎么写
2014/09/25 职场文书
企业整改报告范文
2014/11/08 职场文书
酒会邀请函
2015/01/31 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Python中npy和mat文件的保存与读取
2022/04/24 Python
python+opencv实现目标跟踪过程
2022/06/21 Python