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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
详解JavaScript 作用域
Jul 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 301转向实现代码
2008/09/18 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
python解析文件示例
2014/01/23 Python
python中学习K-Means和图片压缩
2017/11/20 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
大学生素质拓展活动方案
2014/02/11 职场文书
揭牌仪式主持词
2014/03/19 职场文书
五五普法心得体会
2014/09/04 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
公司借款担保书
2015/09/22 职场文书