iframe 根据嵌入的页面大小，动态改变iframe的大小

前端小贰

于 2018-10-15 23:53:14 发布

阅读量1.1w

点赞数 2

分类专栏：前端文章标签： js iframe 动态

本文链接：https://blog.youkuaiyun.com/weixin_42230473/article/details/83066675

版权

前端专栏收录该内容

11 篇文章

订阅专栏

html：

<iframe src="main.html" frameborder="0" scrolling="no" width="100%" id="iframeContent"></iframe>

js ：

//iframe 高度自适应
function setIframeHeight(iframe) {
	iframe.onload=function(){
		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; 
		var iframeHeight=iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
		iframe.height = iframeHeight+10; 
	}
};

调用方法：

setIframeHeight(document.getElementById('iframeContent'));