`
xingsan_zhang
  • 浏览: 55286 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iframe自适应高度并解决jquery ajax获取数据后高度自适应问题

    博客分类:
  • Html
阅读更多

很多管理系统中,都使用iframe进行信息内容的展示方式,或者作为主菜单的链接展示内容。

使用iframe的问题就是自适应高度的问题。

 

iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可。代码如下:

//公共方法:设置iframe的高度以保证全部显示数据
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的全局变量。

 

这里有介绍:[Jquery $.ajax请求详解及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。

 

原文出处:http://www.suchso.com/projecteactual/jquery-ajax-iframe-resetiframeheight.html

相关文章:http://xiaosa.blog.51cto.com/665033/1227753

分享到:
评论

相关推荐

    基于jquery的兼容各种浏览器的iframe自适应高度的脚本

    在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...

    jquery ajax应用中iframe自适应高度问题解决方法

    这种方法通过结合iframe的实时高度获取和jQuery的Ajax事件处理机制,有效地解决了iframe在内容动态加载时的高度自适应问题,提高了Web应用的用户体验和界面的一致性。在具体的实现过程中,开发人员需要确保相关函数...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件,当iframe内容加载完成后,获取其实际内容高度并设置为iframe的height属性。这种方法可以确保iframe始终能完全显示其内部内容,避免滚动条的...

    使用jQuery不判断浏览器高度解决iframe自适应高度问题

    在处理web页面中嵌入iframe元素时,一个常见的问题是iframe自适应问题。由于iframe默认会有一个固定高度,所以当嵌入的内容高度超出iframe的默认高度时,会导致内容被隐藏;而如果内容不足,iframe又会以默认高度...

    jQuery解决iframe高度自适应代码

    在本例中,.load()方法被用于在iframe内容加载完成后,获取内容高度并更新iframe的高度。 知识点五:scrollHeight属性 scrollHeight属性是一个只读属性,它返回元素内容的高度,包括由于溢出导致无法显示在屏幕上的...

    TabDemo(支持iframe修改)

    在IT行业中,网页开发是一项重要的工作,而"TabDemo(支持iframe修改)"是一个关于使用jQuery实现的tab切换功能,特别优化了对iframe的支持。这个项目旨在帮助开发者在网页上创建一个用户友好的导航结构,通过点击不同...

    jQuery获取与设置iframe高度的方法

    除了获取与设置iframe高度的方法外,本文还提到了jQuery的其他相关技巧与操作,比如操作iframe的技巧总结、jQuery的扩展技巧、常用的插件及用法、拖拽特效与技巧、表格操作技巧、Ajax用法、经典特效以及动画与特效的...

    jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

    虽然这是解决问题的一种简单方法,但需要注意的是,这可能会导致一些专门为jquery 3.x设计的插件无法使用,因为某些API可能发生了变化。 总结来说,当遇到jquery与layui等前端框架发生冲突时,我们需要分析冲突的...

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

    ColorBox灯箱,jQuery相册查看控件,仿QQ相册,ajax

    2. **初始化插件**:通过jQuery选择器选取需要应用ColorBox的元素,并调用`.colorbox()`方法进行初始化。 3. **设置参数**:根据需求,可以传递各种参数来定制ColorBox的行为,如`width`、`height`、`href`等。 4. *...

    jQuery的点击弹出窗口特效.zip

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本项目“jQuery的点击弹出窗口特效”着重于利用jQuery实现一个功能丰富的弹窗效果,该效果在用户点击按钮时...

    jQuery灯箱弹出窗口插件litebox.zip

    jQuery Litebox是一款强大的灯箱插件,主要用于在网页中实现优雅的弹出窗口效果,将图片、视频、iframe等内容以模态窗口的形式展示给用户。它具有多种功能和自适应特性,可以无缝地与网页内容集成,提升用户体验。在...

    thickbox------------ jQuery好插件

    在使用Thickbox时,开发者需要注意兼容性问题,虽然它是基于jQuery的,但仍然需要确保目标浏览器支持jQuery和JavaScript。同时,为了提高性能,可以考虑对大图片进行预加载或者优化图片尺寸。 总之,Thickbox作为一...

    jQuery Thickbox3.1 弹出层插件

    4. **初始化插件**:如果需要在页面加载后动态生成弹出层,可以使用jQuery的`.thickbox()`方法来初始化。 在实际应用中,Thickbox3.1的压缩包可能包含以下文件: 1. `thickbox.css`:包含Thickbox的默认样式。 2. ...

    28个jQuery常用插件.

    在JavaScript的世界里,jQuery是一个非常流行且功能强大的库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。由于其易用性和广泛的社区支持,jQuery成为了许多开发者首选的工具。而“28个jQuery常用插件...

    jQuery弹层插件jquery.fancybox.js用法实例

    值得注意的是,当使用Ajax或iframe加载内容时,fancybox要求明确指定宽度和高度,因为不设置的话,它会尝试自适应内容大小。但不同浏览器对内容尺寸的计算可能有差异,特别是在使用特殊字体的情况下,可能导致显示不...

    springmvc 集成 tiles2实现页面模板局部刷新

    5. **浏览器高度自适应**:为了实现浏览器的高度自适应,开发者需要考虑响应式设计。可以使用CSS框架(如Bootstrap)或者媒体查询来确保页面在不同屏幕尺寸下都能良好展示。同时,对于可滚动区域,可能需要动态计算...

    dialog ui jquey .net c# 弹出对话框

    height: 'auto', // 自适应高度 modal: true, // 创建模态对话框 title: '自定义标题' // 设置对话框标题 }); }); ``` 4. **触发对话框**:当需要打开对话框时,例如点击按钮或执行其他操作,可以调用`.dialog...

    类似携程网的城市、日历选择功能

    - `getPosition(obj)`:此函数用于获取DOM元素相对于浏览器窗口的绝对位置,以及元素的宽度和高度,这对于动态布局和定位元素非常关键。 3. 动态创建与操作DOM元素: 在上述代码中,可以看到如何动态创建和操作DOM...

    ThickBox 3.1调用方法+实例演示.zip

    3. **参数设置**:ThickBox支持一些可选参数,通过查询字符串传递,如`width`和`height`来指定弹出框的大小,`autoScale`控制内容是否自适应大小,`closeImage`定义关闭按钮的图像,`titleHeight`设置标题栏的高度等...

Global site tag (gtag.js) - Google Analytics