很多管理系统中,都使用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自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...
这种方法通过结合iframe的实时高度获取和jQuery的Ajax事件处理机制,有效地解决了iframe在内容动态加载时的高度自适应问题,提高了Web应用的用户体验和界面的一致性。在具体的实现过程中,开发人员需要确保相关函数...
jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件,当iframe内容加载完成后,获取其实际内容高度并设置为iframe的height属性。这种方法可以确保iframe始终能完全显示其内部内容,避免滚动条的...
在处理web页面中嵌入iframe元素时,一个常见的问题是iframe自适应问题。由于iframe默认会有一个固定高度,所以当嵌入的内容高度超出iframe的默认高度时,会导致内容被隐藏;而如果内容不足,iframe又会以默认高度...
在IT行业中,网页开发是一项重要的工作,而"TabDemo(支持iframe修改)"是一个关于使用jQuery实现的tab切换功能,特别优化了对iframe的支持。这个项目旨在帮助开发者在网页上创建一个用户友好的导航结构,通过点击不同...
除了获取与设置iframe高度的方法外,本文还提到了jQuery的其他相关技巧与操作,比如操作iframe的技巧总结、jQuery的扩展技巧、常用的插件及用法、拖拽特效与技巧、表格操作技巧、Ajax用法、经典特效以及动画与特效的...
虽然这是解决问题的一种简单方法,但需要注意的是,这可能会导致一些专门为jquery 3.x设计的插件无法使用,因为某些API可能发生了变化。 总结来说,当遇到jquery与layui等前端框架发生冲突时,我们需要分析冲突的...
1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...
2. **初始化插件**:通过jQuery选择器选取需要应用ColorBox的元素,并调用`.colorbox()`方法进行初始化。 3. **设置参数**:根据需求,可以传递各种参数来定制ColorBox的行为,如`width`、`height`、`href`等。 4. *...
在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本项目“jQuery的点击弹出窗口特效”着重于利用jQuery实现一个功能丰富的弹窗效果,该效果在用户点击按钮时...
jQuery Litebox是一款强大的灯箱插件,主要用于在网页中实现优雅的弹出窗口效果,将图片、视频、iframe等内容以模态窗口的形式展示给用户。它具有多种功能和自适应特性,可以无缝地与网页内容集成,提升用户体验。在...
在使用Thickbox时,开发者需要注意兼容性问题,虽然它是基于jQuery的,但仍然需要确保目标浏览器支持jQuery和JavaScript。同时,为了提高性能,可以考虑对大图片进行预加载或者优化图片尺寸。 总之,Thickbox作为一...
4. **初始化插件**:如果需要在页面加载后动态生成弹出层,可以使用jQuery的`.thickbox()`方法来初始化。 在实际应用中,Thickbox3.1的压缩包可能包含以下文件: 1. `thickbox.css`:包含Thickbox的默认样式。 2. ...
在JavaScript的世界里,jQuery是一个非常流行且功能强大的库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。由于其易用性和广泛的社区支持,jQuery成为了许多开发者首选的工具。而“28个jQuery常用插件...
值得注意的是,当使用Ajax或iframe加载内容时,fancybox要求明确指定宽度和高度,因为不设置的话,它会尝试自适应内容大小。但不同浏览器对内容尺寸的计算可能有差异,特别是在使用特殊字体的情况下,可能导致显示不...
5. **浏览器高度自适应**:为了实现浏览器的高度自适应,开发者需要考虑响应式设计。可以使用CSS框架(如Bootstrap)或者媒体查询来确保页面在不同屏幕尺寸下都能良好展示。同时,对于可滚动区域,可能需要动态计算...
height: 'auto', // 自适应高度 modal: true, // 创建模态对话框 title: '自定义标题' // 设置对话框标题 }); }); ``` 4. **触发对话框**:当需要打开对话框时,例如点击按钮或执行其他操作,可以调用`.dialog...
- `getPosition(obj)`:此函数用于获取DOM元素相对于浏览器窗口的绝对位置,以及元素的宽度和高度,这对于动态布局和定位元素非常关键。 3. 动态创建与操作DOM元素: 在上述代码中,可以看到如何动态创建和操作DOM...
3. **参数设置**:ThickBox支持一些可选参数,通过查询字符串传递,如`width`和`height`来指定弹出框的大小,`autoScale`控制内容是否自适应大小,`closeImage`定义关闭按钮的图像,`titleHeight`设置标题栏的高度等...
2. **选择器与数据属性**:为要触发Fancybox的元素添加特定的类名或数据属性,以便jQuery识别并应用Fancybox。 3. **初始化Fancybox**:在jQuery的$(document).ready()函数内,调用$.fancybox()方法,配置所需的选项...