使iframe随内容(target到iframe的内容)改变而自适应高度,完美解决各种获取第一个demo高度后第二个高度不变情况
转自:http://caiceclb.iteye.com/blog/281102
很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题。
失败的测试就不说了,来直接的。
两个链接和iframe:
- <li><a href="selfinfo.jsp" target="c-c-iframe" title="个人信息" >个人信息</a></li>
- <li><a href="modifypass.jsp" target="c-c-iframe" title="修改密码" >修改密码</a></li>
- <iframe src="init.jsp" id="c-c-iframe" name="c-c-iframe" width="500px;" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
js代码:
- <script type="text/javascript">
- <!--
- $(function(){
- $("#c-c-iframe").load(function(){
- $(this).height($(this).contents().find("#content").height() + 40);
- });
- });
- -->
- </script>
这里的find("#content")是找出iframe内容文档中的id为content的高度(另外比如find("body")),并设置给iframe,
类似的还可以设置宽度,留给需要的朋友尝试吧。
这样就解决了iframe不会因为内容过大被挡住的问题(因为我设置了scrolling="no")。
PS:基本上我会优先考虑使用iframe来实现无刷新,兼容浏览器的后退按钮;而且使用iframe加载flash是很爽的,不用写什么js调用,object标签,还符合W3C标准。
推荐下面这种
2008年11月28日17:13:31 ,今天使用过程中根据实际情况进行了一下改良,代码如下:
- <script type="text/javascript">
- <!--
- $(function(){
- $("#workArea").load(function(){
- var height = $(this).contents().find("#box").height() + 40;
- //这样给以一个最小高度
- $(this).height( height < 400 ? 400 : height );
- });
- });
- -->
- </script>
另发现使用find("body")不太好使,高度不准确。
使iframe随内容(target到iframe的内容)改变而自适应高度,完美解决各种获取第一个demo高度后第二个高度不变情况的更多相关文章
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...
- iframe中的target属性
在使用iframe的时候,我们有时候会遇到,外面的链接,去操作iframe中的页面 <!DOCTYPE html> <html> <head> <meta c ...
- 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。
我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...
- jquery 清空 iframe 的内容,,iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
- 点击a标签,跳转到iframe中,并在iframe中显示指定的页面
点击a标签,跳转到iframe中,并在iframe中显示指定的页面 1.用a标签的target属性 <iframe id="myFrameId" name="myF ...
- 如何根据iframe内嵌页面调整iframe高宽续篇
接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...
- iframe之间通信问题及iframe自适应高度问题
下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...
- 如何根据iframe内嵌页面调整iframe高宽
问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置ifram ...
随机推荐
- Django线上部署教程:腾讯云+Ubuntu+Django+Uwsgi(转载)
网站名称: 向东的笔记本 本文链接: https://www.eastnotes.com/post/29 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议.转载请注明出处! ...
- A2. JVM 类加载机制
[概述] 虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的 Java 类型,这就是虚拟机的类加载机制. 与那些在编译时需要进行连接 ...
- TWaver HTML5之树形布局
转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么.今天是春节后上班的第三天,给大家分享一下我们前段时间的一个需求,需求是这样的:界面中的网元分 ...
- Mybatis中and和or的细节处理
当一条SQL中既有条件查又有模糊查的时候,偶尔会遇到这样的and拼接问题.参考如下代码: <select id="listSelectAllBusiness"> sel ...
- idea+maven配置log4j详解
经过上一篇的讲解,知道了实现log4j打印日志依赖的jar包共3个,在pom.xml中加入相关依赖: <!-- 添加log4j日志相关jar包:共3个jar--> <!-- http ...
- day21 02 包的进阶
day21 02 包的进阶 1._init_.py文件的操作---导入包 根据day21 01 包的初识,建立的glance包,直接import glance后通过“包点包..点方法”是不能执行所要的 ...
- react入门----(this.state/表单/Ajax)
1.this.state 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI var TestStat ...
- JSON.parseObject将json字符串转换为bean类,是否大小写敏感区分---https://blog.csdn.net/mathlpz126/article/details/80684034
JSON.parseObject将json字符串转换为bean类,是否大小写敏感区分 https://blog.csdn.net/mathlpz126/article/details/80684034
- noip模拟赛 圆桌游戏
[问题描述] 有一种圆桌游戏是这样进行的:n个人围着圆桌坐成一圈,按顺时针顺序依次标号为1号至n号.对1<i<n的i来说,i号的左边是i+1号,右边是i-1号.1号的右边是n号,n号的左边 ...
- 二叉堆练习3&【模板】堆
时间限制: 3 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定N(N≤500,000)和N个整数(较有序),将其排序后输出. 输入描述 Inp ...