怎么让css iframe高度自适应页面自适应高度

来源：蜘蛛抓取(WebSpider) 时间：2016-08-05 04:09 标签： iframe的高度自适应
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jquery iframe取得元素与自适应高度
jquery iframe取得元素与自适应高度
| 时间： 20:25:18 | 阅读数：
[导读] 今天没事来总结一下iframe在jquery中怎么操作的，下面我来给各位介绍jquery
获取iframe子 父页面的元素及iframe在jquery高度自适应实现方法，各位朋友可参考。jquery方法:在iframe子页面获取父页面元素代码如
今天没事来总结一下iframe在jquery中怎么操作的，下面我来给各位介绍jquery
获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法，各位朋友可参考。
方法:在子页面获取父页面元素代码如下:
$('#objId', parent.document);
// 搞定...在父页面 获取iframe子页面的元素代码如下:
$(&#objid&,document.frames('iframename').document)$(document.getElementById('iframeId').contentWindow.document.body).html()
&&显示iframe中body元素的内容。
&$(&#testId&, document.frames(&iframename&).document).html();
&根据iframename取得其中ID为&testId&元素&
$(window.frames[&iframeName&].document).find(&#testId&).html()
&在父窗口中操作 选中IFRAME中的所有输入框：
&$(window.frames[&iframeSon&].document).find(&:text&);
在IFRAME中操作 选中父窗口中的所有输入框：
$(window.parent.document).find(&:text&);
iframe框架的HTML：
&iframe src=&test.html& id=&iframeSon& width=&700&P height=&300&P frameborder=&0&P scrol=&auto&&&/iframe&
1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames[&iframe1&].document).find(&input[@type='radio']&).attr(&checked&,&true&);
2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find(&input[@type='radio']&).attr(&checked&,&true&);
iframe框架的：
&iframe src=&test.html& id=&iframe1&P width=&700&P height=&300&P frameborder=&0&P scrolling=&auto&&&/iframe&
假设有两个页面,在相同域下.index.html 文件内含有一个iframe:XML/HTML代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&& &html xmlns=&http://www.w3.org/1999/xhtml&&& &head&& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&& &title&页面首页&/title&& &/head&& & &body&& &iframe src=&iframe.html& id=&koyoz& height=&0& width=&0&&&/iframe&& &/body&& &/html&&&
iframe.html 内容:XML/HTML代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&& &html xmlns=&http://www.w3.org/1999/xhtml&&& &head&& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&& &title&iframe.html&/title&& &/head&& & &body&& &div id=&test&&www.&/div&& &/body&& &/html&&iframe自适
应高度代码很简单：
$(&#iPersonalInfo&).load(function() {$(this).height($(this).contents().height());})
有一点需要注意的，我也在调试的时候才发现的，耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定，否则不会执行。 以下是jQuery,load事件的概述 在每一个匹配元素的load事件中绑定一个处理函数。 如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。 注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。iframe代码，注意要写ID
&iframe src=&test.html& id=&main& width=&700& height=&300& frameborder=&0& scrolling=&auto&&&/iframe&
jquery代码１：
//注意：下面的代码是放在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代码２：
//注意：下面的代码是放在和iframe同一个页面调用$(&#main&).load(function(){var mainheight = $(this).contents().find(&body&).height()+30;$(this).height(mainheight);});
手机扫描下方二维码，关注php100官方微信。
同步官网每日更新，为您带来随时随地的资讯与技术信息。更有不定期的互动抽奖活动，赢取实用贴心的小礼物。
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
友情链接与合作伙伴
粤ICP备号-3前端免费教程
慕课网（IMOOC）是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性，并且你可以和朋友一起编程。
jQuery API中文文档
适用jQuery 1.0 – jQuery 1.10.2,jQuery 2.0 – jQuery 2.0.3，翻译至官方文档，并且跟随官方文档持续更新。
跟牛人学前端
跟牛人学前端
前端最新课程体系
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
您的位置： &#187; 分类:
&#187; 文章: iframe自适应高度【框架自适应高度】
iframe自适应高度传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
但是碰到有些页面会根据用户的操作或者为了增加用户体验的时候我们的页面高度可能会增加。这就要求使用其他办法：我们可以用setInterval();
代码如下：
&!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221; &#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;
xmlns=&#8220;http://www.w3.org/1999/xhtml&#8221;iframe自适应高度-demo
http-equiv=Content-Type content=&#8220;text/ charset=GBK&#8221;
content=&#8220;MSHTML 6.00.&#8221; name=GENERATOR
style=&#8220;BORDER-RIGHT: 1 BORDER-TOP: 1 BORDER-LEFT: 1 WIDTH: 400 BORDER-BOTTOM: 1px dotted&#8221;
id=frame_content src=&#8220;iframe_b.html&#8221; frameBorder=0 scrolling=no
onload=this.height=100
onclick=checkHeight()Check Height
type=text/javascript
function reinitIframe(){
var iframe = document.getElementById(&#8220;frame_content&#8221;);
var bHeight = iframe.contentWindow.document.body.scrollH
var dHeight = iframe.contentWindow.document.documentElement.scrollH
var height = Math.max(bHeight, dHeight);
iframe.height =
}catch (ex){}
window.setInterval(&#8220;reinitIframe()&#8221;, 200);
function checkHeight() {
var iframe = document.getElementById(&#8220;frame_content&#8221;);
var bHeight = iframe.contentWindow.document.body.scrollH
var dHeight = iframe.contentWindow.document.documentElement.scrollH
alert(&#8220;bHeight:&#8221; + bHeight + &#8220;, dHeight:&#8221; + dHeight);
查看完整的演示：
This entry was posted in . Bookmark the .
您可能感兴趣的文章
近期最热文章
- 5,736 - 4,318 - 3,988 - 394 - 263<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&3312人阅读
html/jsp/servlet（17）
给iframe添加属性onload=&javascript:this.height=this.contentWindow.document.body.scrollHeight&#43;30;&
&Iframe src=&&%=&request.getContextPath() %&/listColumnAction.do& width=&100%& style=&_width: 100%;&
&&&&&height=&100& scrolling=&auto& frameborder=&0& name=&main& onload=&javascript:this.height=this.contentWindow.document.body.scrollHeight&#43;30;&&&/iframe&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：343596次
积分：3563
积分：3563
排名：第6339名
原创：67篇
转载：19篇
评论：30条
(1)(1)(2)(2)(2)(2)(1)(3)(2)(1)(2)(1)(2)(3)(3)(2)(5)(4)(3)(2)(1)(3)(2)(1)(2)(8)(16)(7)(1)(1)

我要回帖

更多关于 iframe的高度自适应 的文章

 

随机推荐