iframe 自适应高度

<iframe id="iframePage" name="iframePage" src="http:www.xxx.com" scrolling="no" height="100%" width="1300"  ></iframe>
<iframe id="iframePage" name="iframePage" src="http:www.xxx.com" scrolling="no" height="100%" width="1300" onload="Javascript:setWinHeight()" ></iframe>
function setWinHeight() {
    setInterval(setIframeHeight, 2000);
}

function setIframeHeight(){
    var ifm= document.getElementById("iframePage");
    var subWeb = document.frames ? document.frames["iframePage"].document : ifm.contentDocument;
    if(ifm != null && subWeb != null) {
        ifm.height = subWeb.body.scrollHeight;
    }
}

如果iframe 的页面是通过ajax动态加载的,那么需要通过 setInterval来修改iframe的高度,

如果iframe的页面是静态的页面, 则onload方法直接调用setIframeHeight方法就OK了。

 
时间: 2024-11-09 03:19:30

iframe 自适应高度的相关文章

网页制作技巧:iframe自适应高度

转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条. 我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的.而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题.另外,在兼容性方面,也研究的不彻底. 这篇文章,希望在这两个方面再做一些深入. 可能有人还没接触到

iframe自适应高度的多种方法方法小结

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的. 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(ob

iframe自适应高度 (转)

转自:http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html 通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条.我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的.而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题.另外,在兼容性方面,也研究的不彻底. 这篇文章,希望在这两个方面再做一些深入. 可能有人还没接触到这个问

iframe自适应高度

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的,不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: function SetWinHeight(obj) { var win=obj; if (documen

iframe自适应高度的问题

最近工作中遇到了iframe自适应高度的问题. 如果在iframe中写定高度height的属性,并且iframe中内容高度小于给定的height时,会在手机浏览器中莫名的产生下拉框,造成体验度下降. 但是如果不去设定height的属性,iframe的高度始终维持在150px,这样的话我们只能够通过js动态的去改变iframe的高度,实现iframe的高度自适应. 高度自适应的本质就是通过内容高度,去设定iframe高度. 然而因为iframe中内容的背景色不一定和父级页面的一致,所以我们在内容高

iframe 高度设置、iframe 自适应高度方法总结

谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 如果iframe的高度没有确定,那将是初始的高度.iframe是网页中的一部分,其大小还要受到网页的限制,设置最高可以使用height="100

关于有ajax 请求的iframe自适应高度问题

关于第一种iframe自适应高度问题比较简单 页面加载完后 重新计算一下高度 1 document.onreadystatechange=function() { 2 if(document.readyState=="complete"){ 3 window.parent.document.getElementById("iframeID").height=document.body.scrollHeight; 4 } 5 } 还有一种就是页面有使用jQuery a

iframe自适应高度解决方法 .

<div id="leftBar"> <iframe name="tag" src="_iframe.html" style="width:100%; min-height:510px; border:0; overflow:hidden" onload="this.height=tag.document.body.scrollHeight"></iframe> <

iframe自适应高度的多种方法

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj

Iframe 自适应高度的方法!

第一种方法:代码简单,兼容性还可以,大家可以先测试下. 1 function SetWinHeight(obj) 2 { 3 var win=obj; 4 if (document.getElementById) 5 { 6 if (win && !window.opera) 7 { 8 if (win.contentDocument && win.contentDocument.body.offsetHeight) 9 win.height = win.contentDo