iframe嵌套页面高度自适应,怎么让iframe自适应浏览器的高度和宽度

使用以下样式定义包装类：.resp-container { position: relative; overflow: hidden; padding-top: 56.25%;}position: relative和iframe的位置在这里非常重要。position: relative以便稍后我们可以将iframe与包装元素相关联。这是因为在CSS中，position: absolute基于最接近的非静态父元素定位元素。overflow: hidden 是否隐藏任何可能放在容器外面的元素。padding-top: 56.25%这就是关键所在。在CSS中，padding-top属性可以设置百分比，这使我们的iframe保持正确的比例。通过使用百分比，它将根据元素的宽度计算要使用的填充。在我们的示例中，我们希望保持56.26％的比率，也可以使用其他比率。按如下方式定义iframe类：.resp-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}position: absolute;这将为iframe提供相对于包装器的位置，并将其放置在包装器的填充上。top: 0并left: 0用于将iframe定位在容器的中心。width: 100%并且height: 100%使IFRAME采取所有包装的空间。完成后，你应该得到一个响应的iframe。总结：在本文中，我们已经看到了可以让iframe实现自适应高度的技巧。正如您所看到的，它实际上非常简单，希望这篇文章可以给你节省数小时的尝试时间。【相关教程推荐】1、CSS教程2、
是什么？html中iframe标签的用法详解3、CSS在线手册</p><H2 id="HTML教程：如何设置Iframe自适应高度">HTML教程：如何设置Iframe自适应高度</H2> <p>不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数： 一、程序代码function SetWinHeight(obj){var win=obj;if (document.getElementById){if (win && !window.opera){if (win.contentDocument && win.contentDocument.body.offsetHeight)win.height = win.contentDocument.body.offsetHeight;else if(win.Document && win.Document.body.scrollHeight)win.height = win.Document.body.scrollHeight;}}}最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配；二、程序代码：我们看看另一种情况的iframe解决方案重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下：1、建立一个bottom.js的文件，然后输入下面的代码；parent.document.all("框架ID名").style.height=document.body.scrollHeight;parent.document.all("框架ID名").style.width=document.body.scrollWidth；2、给你网站里所有的被包含文件里面每个都加入，在WINXP、IE6下面测试通过；实现 iframe 的自适应高度 实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象；程序代码//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的IDvar iframeids=["test"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes"function dyniframesize(){var dyniframe=new Array()for (i=0; i{if (document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids);if (dyniframe && !window.opera){dyniframe.style.display="block"if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScapedyniframe.height = dyniframe.contentDocument.body.offsetHeight;else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IEdyniframe.height = dyniframe.Document.body.scrollHeight;}}//根据设定的参数来处理不支持iframe的浏览器的显示问题if ((document.all || document.getElementById) && iframehide=="no"){var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)tempobj.style.display="block"}}}if (window.addEventListener)window.addEventListener("load", dyniframesize, false)else if (window.attachEvent)window.attachEvent("onload", dyniframesize)elsewindow.onload=dyniframesize//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的IDvar iframeids=["test"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes"function dyniframesize(){var dyniframe=new Array()for (i=0; i{if (document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids);if (dyniframe && !window.opera){dyniframe.style.display="block"if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScapedyniframe.height = dyniframe.contentDocument.body.offsetHeight;else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IEdyniframe.height = dyniframe.Document.body.scrollHeight;}}//根据设定的参数来处理不支持iframe的浏览器的显示问题if ((document.all || document.getElementById) && iframehide=="no"){var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)tempobj.style.display="block"}}}if (window.addEventListener)window.addEventListener("load", dyniframesize, false)else if (window.attachEvent)window.attachEvent("onload", dyniframesize)elsewindow.onload=dyniframesize//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的IDvar iframeids=["git"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes"function dyniframesize(){var dyniframe=new Array()for (i=0; i </p><H2 id="如何设置iframe高度自适应在跨域情况下的可用方法_javascript技巧">如何设置iframe高度自适应在跨域情况下的可用方法_javascript技巧</H2> <p> 在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe，然后对属性src指定一个可加载的页面，这样当父页面被访问的时候，子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度，超出的部分无法显示；相反，如果iframe的高度过高，则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe的高度，当不确定子页面内容的高度时，也可以通过脚本来进行动态指定。但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题！ 如题所述，本文在介绍可用方法的同时，也向大家询问除下文列出来的方法之外是否还有其它方法可寻？ 通过属性或CSS来设置iframe的高度这里就不再具体介绍了。首先来看看如何通过脚本进行设置。 代码如下: function ChangeFrameHeight(id) { var count = 1; (function() { var frm = document.getElementById(id); var subWeb = document.frames ? document.frames[id].document : frm.contentDocument; if (subWeb != null) { var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight); frm.height = height; } if (count count = count + 1; window.setTimeout(arguments.callee, 2000); } })(); } 假设iframe子页面和父页面都在同一域内，通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成，该函数会每隔2秒重新执行一次，一共执行3次。极端情况下子页面的加载速度会慢于父页面，可适当对执行次数和时间做调整。 代码如下: 如果遇到子页面跨域的问题，可通过HTML5的postMessage来实现，但前提是子页面需要主动向父页面发送信息。下面是子页面部分： 代码如下: Got post? Lots of stuff here which will be inside the iframe. 在父页面中获取到子页面传递过来的信息，然后对iframe的高度进行调整。 代码如下: function resizeCrossDomainIframe(id, other_domain) { var iframe = document.getElementById(id); window.addEventListener('message', function(event) { if (event.origin !== other_domain) return; // only accept messages from the specified domain if (isNaN(event.data)) return; // only accept something which can be parsed as a number var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar iframe.height = height + "px"; }, false); } 有关如何使用HTML5的postMessage()方法可以查看这篇文章http://dev.w3.org/html5/postmsg/#web-messaging 但是在大多数情况下，iframe中所引用的子页面除了和父页面不在同一域之外，我们可能根本无法对子页面进行任何操作，或者说子页面根本没有提供Corss-document messaging功能。在这种情况下，通过postMessage()方法也无法获取到子页面的任何信息。由于无法和子页面进行任何交互，也就没有办法得知子页面的document对象，从未无法根据子页面的实际高度来调整父页面iframe的height属性了。 目前没有其它实际有效的方法来处理上面遇到的问题。默认情况下可以给iframe指定一个比较大的高度，这样假设所引用的子页面内容不会超出范围，除了在页面上会留下部分空白区域外，内容显示基本不会有问题。 那是否还存在其它比较有效的解决方法呢？期待！ </p><H2 id="怎么让iframe自适应浏览器的高度和宽度">怎么让iframe自适应浏览器的高度和宽度</H2> <p> 让iframe自适应浏览器的高度和宽度的具体步骤如下：<br> 1、首先设置样式：body{margin:0; padding:0;}。<br> <br> 2、如果不设置body的margin和padding为0的话，页面上下左右会出现空白。<br> 代码如下：<iframe src=://fulibac id="myiframe" scrolling="no" frameborder="0">。

3、这个方法可以达到让iframe自适应高度的效果，但是如果将窗口放大或缩小效果就不出来了，也就是本文开头讲的。

需要再次刷新，那就不属于自适应了。

代码是：

var ifm= document.getElementById("myiframe");

ifm.height=document.documentElement.clientHeight;

怎么让iframe自适应高度

什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。
如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。
Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
主页面代码示例：

agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制）

iframe在div中如何自适应高度

700?fdh:700)">
iframe高度自适应，700为自己设定的iframe高度最低值，高度小于700的将以700显示，大于700将以div自身高度来显示。iframe高度最低值可以自己修改

<iframe id="mainframe" name="mainframe" src="smb010201.aspx" frameborder="0" width="100%" scrolling="no" height="100%"
onload="document.all('mainframe').style.height=mainframe.document.body.scrollHeight+30;">
我测试过，完全可以用的
Iframe高度自适应

marginwidth='0' marginheight='0' frameborder='0'
//window.onresize表示窗口触发时间的时候执行
//两个函数，用闭包包裹起来()()
window.onload=function(){
(window.onresize=function(){
//获取可见宽度
var width=document.documentElement.clientWidth-180;//180为左边的div的大小
//获取可见高度
var height=document.documentElement.clientHeight-80;//80为头部的div的大小可自己修改
//如果有宽度就给值，
if(width>=0){
document.getElementById('main').style.width=width+'px';
}
if(height>=0){
document.getElementById('sidebar').style.height=height+'px';
document.getElementById('main').style.height=height+'px';
}
})()};
扩展资料：//设置iframe的高度
function resizeFrameHeight() {
$('.tab_iframe').css('height', document.documentElement.clientHeight - 118);
$('md-tab-content').css('left', '0');
}
window.onresize = function () {
resizeFrameHeight();
initScrollShow();
initScrollState();
}