Iframe自动适应宽度和高度

原创 2016年06月02日 12:43:48
 Iframe自动适应宽度和高度
 <iframesrc="Guestbook/index.asp?ver=cn&classid=1"id="newsiframe" marginwidth="0" marginheight="0" frameborder="0"scrolling="no" width="100%" onload="this.height=0;varfdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>10?fdh:10)"></iframe>
 
一般样式:
<iframe src="index_center.asp?adminid=3"height=205 width=285 frameborder=0 scrolling=no border="0"></iframe>




 Iframe自动适应高度(要在同一个域名下,引用别人网址是不行)
最好是在本地测试:
<!DOCTYPE html>
<html lang="sv">
<head>
	<meta charset="utf-8" />
	<title>Iframe height demo</title>
	<style media="screen,print">
	#body {
		width:70em;
		max-width:100%;
		margin:0 auto;
	}
	iframe {
		width:100%;
		margin:0 0 1em;
		border:0;
	}
	</style> 
</head>
<body>
	<div id="body">
		<iframe src="type.php" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
		<script type="text/javascript">  
    function reinitIframe(){  
        var iframe = document.getElementById("test");  
        try{  
            var bHeight = iframe.contentWindow.document.body.scrollHeight;  
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;  
            var height = Math.max(bHeight, dHeight);  
            iframe.height =  height;  
            console.log(height);
        }catch (ex){}  
    }  
  
    window.setInterval("reinitIframe()", 200);  
</script>
	</div>
</body>
</html>

引用:http://caibaojian.com/iframe-adjust-content-height.html

版权声明:本文为博主原创文章,未经博主允许不得转载。

iframe自适应高度和宽度 全css实现无javascript

  菜单管理>                              >>     height:100%;width:100%;right:0px;border:solid 0px red;" ...
  • okkk
  • okkk
  • 2010年04月28日 11:19
  • 14054

iframe 自动适应子页面高度宽度

iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx" frameborder="0" s...
  • qq_27474851
  • qq_27474851
  • 2016年08月29日 09:47
  • 1101

纯 css 实现 iframe 宽高自适应

从网上找了东西,发现都不适合自己的要求,也有纯css实现的,懒得看,大部分是基于js的,当然我的理念是能不用js就不用(这这是个个人怪癖,其实js也没什么,毕竟现在99%以上的浏览器都支持js了)。于...
  • chinet_bridge
  • chinet_bridge
  • 2011年10月29日 13:31
  • 2035

真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时ifra...
  • alex8046
  • alex8046
  • 2016年05月19日 18:37
  • 143981

iframe在div中如何自适应高度

为了帮助网友解决“iframe在div中如何自适应高度”相关的问题,中国学网通过互联网对“iframe在div中如何自适应高度”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:iframe...
  • killcwd
  • killcwd
  • 2015年12月04日 17:09
  • 3371

iframe宽高自适应

body{ margin:0; padding:0; overflow: hidden; } $(function(){ ch...
  • missby2016
  • missby2016
  • 2017年03月11日 18:08
  • 842

iframe自适应父容器宽高

button
  • u012557538
  • u012557538
  • 2016年01月14日 14:45
  • 1174

跨域iframe高度自适应的多种方法

当 A页面中嵌入一个新页面B时,我们常常会使用 iframe来实现。当 A页面和 B页面在不同的域名下时,A页面就不能使用 Javascript 访问到的 B页面的高度,那么该如何解决这类问题呢?直接...
  • aaronpan21
  • aaronpan21
  • 2016年04月25日 21:42
  • 4271

jQuery解决iframe高度随内容自动调整

网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试。...
  • huhai463127310
  • huhai463127310
  • 2009年12月19日 20:47
  • 7029

iframe 根据内容自适应高度-终极解决方案

第一中方法: 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementBy...
  • ye987987
  • ye987987
  • 2016年07月05日 15:41
  • 27925
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Iframe自动适应宽度和高度
举报原因:
原因补充:

(最多只允许输入30个字)