Iframe自动适应宽度和高度

最新推荐文章于 2024-03-14 15:48:00 发布

我是高手高手高高手

最新推荐文章于 2024-03-14 15:48:00 发布

阅读量4.5k

点赞数

分类专栏：网页技巧 HTML/CSS JS技巧 jQuery

本文链接：https://blog.csdn.net/haibo0668/article/details/51565610

版权

JS技巧同时被 3 个专栏收录

244 篇文章 3 订阅

订阅专栏

网页技巧

142 篇文章 2 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

Iframe自动适应宽度和高度

<iframe src="backtop.html" 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>

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

<iframesrc="Guestbook/index.asp?ver=cn&classid=1"id="newsiframe" marginwidth="0" marginheight="0" frameborder="0"scrolling="no" width="100%" οnlοad="this.height=0;varfdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>10?fdh:10)"></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

我是高手高手高高手

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Iframe自动适应宽度和高度

Iframe自动适应宽度和高度<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe><script type="text/javascript">function reinitIframe(){var...
复制链接

扫一扫