iframe 自适应高度和宽度

<iframe src="pay/index.aspx" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"
width="100%" height="100%" frameborder="0" id="iframepage" name="iframepage" onLoad="iFrameHeight()"></iframe>

<script type="text/javascript" language="javascript">

function iFrameHeight() {

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;

}

}

</script>

注意:Iframe 的src  值不能跨域。

时间: 2024-10-08 14:34:38

iframe 自适应高度和宽度的相关文章

跨域下iframe自适应高度

最近在做一个需求,需求大致背景:页面中iframe嵌入另一家公司的列表页 博主的第一反应就是“very easy!”,so,挽起双袖开始敲代码 结果出现问题了,iframe跨域,无法获得内嵌页面的高度,因此出现的上下滚动条,so难看! 于是上网找大神,皇天不负有心人啊,终于找到了,激动之情无以言表.... 故事背景交代完毕 /******************************华丽的分割线,哈哈****************************/ 大神的例子大致是这样的: 假设ww

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

网页制作技巧: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自适应高度

跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度.需要一个页面来做代理.方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html.我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度. a.html中包含iframe: <iframe src="http://www.b.com/c.html" id="Iframe

关于有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