[ZT]Use JQuery to adjust the iframe height
来源:互联网 发布:游戏程序员工作时长 编辑:程序博客网 时间:2024/05/21 07:46
Although frame is generally not recommended on most of the web pages, iFrame can still be useful in some occasions, especially as an Ajax alternative. One strength of Ajax is that it greatly reduces (or at least it appears so) the page response time by only changing a small part of the page. Using Ajax to submit a form is a great example. This usability improvement doesn’t come free though. In order to use Ajax to send the form data back to the server, the JavaScript code has to be written to collect the form data and append them to the request URL as GET or POST parameters. Frameworks like JQuery or Prototype make this process a lot easier.
However there is some limitation to use Ajax to post a multi-part form. Although it might be possible, it is definitely not a clean implementation, and it is not supported by most of the browsers. In this case, iFrame may be a good alternative. The inner frame page will handle the multi-part form and the parent page will have the similar Ajax effect. That being said, iFrame’s biggest problem is that its width and height are set right from the start and it won’t adjust based on the source content. This will leave the ugly scrolling bars around the iFrame, or some content will be hidden if the scroll bar is disabled. For most of the pages, the width is somewhat less of a problem but the height is harder to control and set correctly.
The good news is there are ways to dynamically adjust the height of the iFrame based on the inner content. There are different ways to achieve this using JavaScript. I found this approach is the best:
Using jQuery, we can add the following code in the iframe source content:
<script type="text/javascript">
$(document).ready(function() {var theFrame = $(“#iFrameToAdjust”, parent.document.body);theFrame.height($(document.body).height() + 30);
});</script>
The JavaScript will get the iframe object from the parent DOM and change its height according to the size of the current document after the document is loaded (very important to get the true size). I like it because it is less intrusive to the page where the iframe is on, and the iframe source kind of “take care of its own size” when being displayed. If the source page is displayed as regular page, there simply will not be any adjustment. With the help of jQuery the code is quite clean and simple. Of course the iframe source has to be an internal page and the developer has the permission to add the code.
From my testing result, this works in FF2, IE7 and Opera 9.25, not in Safari 3.1 for Windows though.
Some updates:
I found it work better to put the JavaScript which adjusts the frame height in the body onLoad attribute. Basically “ready” function will be kicked off when the DOM is loaded, at which point the page may or may not be completely loaded. The onLoad event will be a better bet in this case since we need the actual size of the page including all the images.
本文转自:http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html
- [ZT]Use JQuery to adjust the iframe height
- ZT: How to use GCC
- Synchronize the height of iframe and parent
- You may need to adjust the proxy settings in Gradle.
- Use the JQuery To upload images and create thumbnail
- How to register and use the native Kentico jQuery library
- How to Use Design Patterns(ZT)
- Use jQuery to scroll to the bottom of a div with lots of text
- How to set the ListView Rows Height
- PercentRelativeLayout, how to set the height programatically
- How to use the CAknWaitDialog
- how to use the CAknwaitDialog
- How to use the CAknWaitDialog
- Learn to use the bugster
- How to use the BAPI_BUPA_ADDRESS_CHANGE
- the process to use oop
- Error:Unknown host 'android.oa.com'. You may need to adjust the proxy settings in Gradle.
- Unknown host 'android.oa.com'. You may need to adjust the proxy settings in Gradle.
- Linux安装Ldap
- exp/imp 与 expdp/impdp 对比 及使用中的一些优化事项
- 【转】Android 获取系统或SDCARD剩余空间信息
- 定位系统
- rtsp 移动流媒体服务器Darwin Streaming Server安装和配置
- [ZT]Use JQuery to adjust the iframe height
- 请问如何用U盘做系统启动盘?
- Item 47 用trait类提供类型信息
- 如何统计页面的加载时间呢
- OpenMax介绍
- 实验进阶OCP #1 表空间
- Servlet页面跳转相关
- 使用缺陷数据作为绩效考评通常不是一个好主意
- BlackBerry Chalk Pushcast Software