jquery 实现iframe 自适应高度

标签: jquery iframe 适应 | 发表时间:2015-07-25 13:27 | 作者:frinder
出处:http://www.iteye.com

引用:http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html

 

 

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
注意别放错地方了哦。


iframe代码,注意要写ID

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

 

jquery代码1:

//注意:下面的代码是放在test.html调用

$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

 


jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用

 

$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery iframe 适应] 推荐:

jquery 实现iframe 自适应高度

- - Web前端 - ITeye博客
引用:http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html. 超级简单的方法,也不用写什么判断浏览器高度、宽度啥的. 一个是放在和iframe同页面的,一个是放在test.html页面的. iframe代码,注意要写ID. jquery代码1:.

JavaScript Iframe 自动适应

- - ITeye博客
场景:Iframe嵌入flash,希望flash能随着页面的resize而resize. 首先导入JQuery框架,并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条. 然后添加window的resize事件.  这样的话,每次浏览器resize的话,都会对iframe重新设置height,从而得到iframe resize的效果.

三谈Iframe自适应高度

- xiao - Koubei UED Team
一是因为这真的是一个被说烂的话题,二是因为太师傅在n年前就写过这篇再谈iframe自适应高度. 之所以再提该问题,是因为之前项目中确实遇到了这个问题的方方面面,有必要总结一下. 希望对各位有帮助,有错误请指正. 同域、子页面高度不会动态增加. 这种情况最简单,直接通过脚本获取字页面实际高度,修改iframe元素高度即可.

jq 解决iframe高度自适应。

- - Web前端 - ITeye博客
已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

DIV嵌套同域iframe的高度自适应

- - 编程语言 - ITeye博客
我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的. 2.html,很多P元素将高度撑高一些.

这是一个ifrmae,嵌入在http:. //snandy.github.io/lib/iframe/1.html里

.

根据自身内容调整高度

.

iframe子父页面调用

- - CSDN博客Web前端推荐文章
1、iframe子页面调用 父页面js函数. 子页面调用父页面函数只需要写上window.praent就可以了. 子页面取父页面中的标签中的值,比如该标签的id为“test”,则:. 但是我在chrome浏览器下却发现此方法无效了. 查了半天才了解,在chrome 5+中,window.parent无法在file://协议中运行,但是发布了之后http://协议下是可以运行的.

iframe post提交数据

- - Web前端 - ITeye博客
对于iframe默认get提交 需要进行post数据的大量提交,给找到外国网站的简单例子如:
. 因为我项目用到的是 页面用的tab 样式(如何实现tab样式切换这里不做说明),嵌入的是三个页面iframe,需要在切换的时候更改target指定iframe名字,为了验证是否可行,只好试下,不然无别的办法.

js打印iframe里面的内容

- - JavaScript - Web前端 - ITeye博客
有时候系统中会有这样的需求,打印某些页面里的某部分内容,采用iframe的contentWindow.print()方法可以实现. . 当点击按钮时可以实现打印功能. 这样能实现打印功能,但是存在一个问题,就是如果这个iframe所在的这个页面还有其他的内容,而我们只需打印iframe里的内容,我试过了,如果用google那么他可以正常打印,但是IE,360却会打印这个页面的所有内容,这是因为当前也页面的焦点是在整个文档的,所以我们只需要将焦点设为iframe的window对象就可以了.

帮助你构建自适应布局的30款优秀 jQuery 插件(下篇)

- - 博客园_首页
自适应设计(Responsive Layouts)是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. 下面是收集的15款优秀的自适应 . jQuery 插件,希望这些插件能够帮助到您. Tiny Fluid Grid Tiny Fluid Grid是一个非常新颖的网格生成工具,能够在线预览和下载.

【转载】HTML5有效提升iFrame安全性 新增Sandbox属性

- - HTML5研究小组
HTML 5将针对iframe元素增加sandbox属性,可以防止不信任的Web页面执行某些操作. HTML 5规范的编辑Ian Hickson谈到了sandbox的好处,它可以防止如下操作:. 访问父页面的DOM(从技术角度来说,这是因为相对于父页面iframe已经成为不同的源了). 通过脚本嵌入自己的表单或是操纵表单.