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 相关文章推荐
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
详解jQuery事件
Jan 13 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
详解vue-router基本使用
Apr 18 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 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执行sql语句的写法
2009/03/10 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
django框架模板语言使用方法详解
2019/07/18 Python
Mac安装python3的方法步骤
2019/08/09 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
会计毕业生自荐信
2013/11/21 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
机械系毕业生求职信
2014/05/28 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书