调整iframe的宽度以适合其中的内容

我需要一个解决scheme来自动调整iframe的宽度和高度,以适应其内容。 重点是在加载iframe之后,宽度和高度可以改变。 我想我需要一个事件动作来处理包含在iframe中的body的尺寸变化。

<script type="application/javascript"> function resizeIFrameToFitContent( iFrame ) { iFrame.width = iFrame.contentWindow.document.body.scrollWidth; iFrame.height = iFrame.contentWindow.document.body.scrollHeight; } window.addEventListener('DOMContentLoaded', function(e) { var iFrame = document.getElementById( 'iFrame1' ); resizeIFrameToFitContent( iFrame ); // or, to resize all iframes: var iframes = document.querySelectorAll("iframe"); for( var i = 0; i < iframes.length; i++) { resizeIFrameToFitContent( iframes[i] ); } } ); </script> <iframe src="usagelogs/default.aspx" id="iFrame1"></iframe> 

跨浏览器的jQuery插件 。

交叉域,跨域域 ,使用mutationObserver保持iFrame大小的内容和postMessage在iFrame和主机页面之间进行通信。 可以使用或不使用jQuery。

迄今为止所给出的所有解决scheme仅仅是一次性resize。 你提到你想在内容被修改后能够调整iFrame的大小。 为了做到这一点,你需要在iFrame中执行一个函数(一旦内容被改变了,你需要激发一个事件来说明内容已经改变了)。

我被困住了一段时间,因为iFrame中的代码似乎仅限于iFrame内部的DOM(并且不能编辑iFrame),并且在iFrame之外执行的代码与iFrame之外的DOM卡住(并且不能在“捡起一个来自iFrame内部的事件)。

解决scheme来自于发现(通过同事的协助)jQuery可以被告知使用什么DOM。 在这种情况下,父窗口的DOM。

因此,像这样的代码可以完成你所需要的(当在iFrame中运行时):

 <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#IDofControlFiringResizeEvent").click(function () { var frame = $('#IDofiframeInMainWindow', window.parent.document); var height = jQuery("#IDofContainerInsideiFrame").height(); frame.height(height + 15); }); }); </script> 

如果iframe内容来自同一个域名,这应该很好。 它确实需要jQuery。

 $('#iframe_id').load(function () { $(this).height($(this).contents().height()); $(this).width($(this).contents().width()); }); 

要dynamicresize,你可以这样做:

 <script language="javaScript"> <!-- function autoResize(){ $('#themeframe').height($('#themeframe').contents().height()); } //--> </script> <iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe> 

然后在iframe载入的页面上添加:

 <script language="javaScript"> function resize() { window.parent.autoResize(); } $(window).on('resize', resize); </script> 

这是一个跨浏览器的解决scheme,如果你不想使用jQuery:

 /** * Resizes the given iFrame width so it fits its content * @param e The iframe to resize */ function resizeIframeWidth(e){ // Set width of iframe according to its content if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax e.width = e.contentWindow.document.body.scrollWidth; else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax e.width = e.contentDocument.body.scrollWidth + 35; else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8 e.width = e.contentDocument.body.offsetWidth + 35; } 

embedded式单线解决scheme:以最小尺寸开始并增加至内容大小。 不需要脚本标签。

 <iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe> 

我正在使用这段代码来自动调整页面加载的所有iframe的高度(使用类autoHeight)。 经过testing,它可以在IE,FF,Chrome,Safari和Opera中运行。

 function doIframe() { var $iframes = $("iframe.autoHeight"); $iframes.each(function() { var iframe = this; $(iframe).load(function() { setHeight(iframe); }); }); } function setHeight(e) { e.height = e.contentWindow.document.body.scrollHeight + 35; } $(window).load(function() { doIframe(); }); 

这是一个坚实的certificate解决scheme

 function resizer(id) { var doc=document.getElementById(id).contentWindow.document; var body_ = doc.body, html_ = doc.documentElement; var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight ); var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth ); document.getElementById(id).style.height=height; document.getElementById(id).style.width=width; } 

的HTML

 <IFRAME SRC="blah.php" id="iframe1" onLoad="resizer('iframe1');"></iframe> 

这里有几种方法:

 <body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe> </body> 

和另一个select

 <body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> </body> 

隐藏滚动2种select如上所示

 <body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe> </body> 

用第二个代码攻击

 <body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe> </body> 

为了隐藏iFrame的滚动条,父项被设置为“overflow:hidden”来隐藏滚动条,并且iFrame的宽度和高度达到150%,强制页面外的滚动条被打开,没有滚动条,人们可能不希望iframe超出页面的边界。 这隐藏了iFrame的全部滚动条!

来源:设置iframe自动高度

在我尝试了地球上的所有东西之后,这真的对我有用。

的index.html

 <style type="text/css"> html, body{ width:100%; height:100%; overflow:hidden; margin:0px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function autoResize(iframe) { $(iframe).height($(iframe).contents().find('html').height()); } </script> <iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe> 

都不能使用上述方法。

JavaScript的:

 function resizer(id) { var doc = document.getElementById(id).contentWindow.document; var body_ = doc.body, html_ = doc.documentElement; var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight); var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth); document.getElementById(id).style.height = height; document.getElementById(id).style.width = width; } 

HTML:

 <div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv" > <input id="txtHeight"/>height <input id="txtWidth"/>width <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0" ></iframe> <iframe src="left.aspx" name="leftFrame" scrolling="yes" id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe> <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; " onload="resizer('Iframe2');" ></iframe> </div> 

环境:IE 10,Windows 7 x64

我稍微修改了Garnaph上面的很好的解决scheme。 似乎他的解决scheme根据事件发生前的大小修改了iframe大小。 对于我的情况(通过iframe发送电子邮件)我需要iframe高度在提交后立即更改。 例如在提交后显示validation错误或“谢谢”消息。

我只是消除了嵌套的click()函数,并将其放入我的iframe html:

 <script type="text/javascript"> jQuery(document).ready(function () { var frame = $('#IDofiframeInMainWindow', window.parent.document); var height = jQuery("#IDofContainerInsideiFrame").height(); frame.height(height + 15); }); </script> 

为我工作,但不知道跨浏览器function。

如果有人来到这里:当我从iframe中删除div时,我遇到了一些问题 – iframe没有缩短。

有一个Jquery插件可以完成这项工作:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

经过一番试验,我find了另一个解决scheme。 我最初尝试了这个问题的标记为“最佳答案”的代码,并没有奏效。 我的猜测是因为我的程序在当时的iframe是dynamic生成的。 这是我使用的代码(它为我工作):

正在加载的iframe中的Javascript:

 window.onload = function() { parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px'; parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px'; }; 

有必要添加4个或更多像素的高度来删除滚动条(一些奇怪的bug / iframe的效果)。 宽度更奇怪,你可以安全地将18px添加到身体的宽度。 另外请确保您已经应用了iframe正文的css(如下)。

 html, body { margin:0; padding:0; display:table; } iframe { border:0; padding:0; margin:0; } 

这里是iframe的html:

 <iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe> 

以下是我的iframe中的所有代码:

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>File Upload</title> <style type="text/css"> html, body { margin:0; padding:0; display:table; } </style> <script type="text/javascript"> window.onload = function() { parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px'; parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px'; }; </script> </head> <body> This is a test.<br> testing </body> </html> 

我已经完成了在Chrome中testing,并在Firefox(在Windows XP中)一点点。 我还有更多的testing要做,所以请告诉我这是如何工作的。

我发现这个调整器工作得更好:

 function resizer(id) { var doc = document.getElementById(id).contentWindow.document; var body_ = doc.body; var html_ = doc.documentElement; var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight ); var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth ); document.getElementById(id).height = height; document.getElementById(id).width = width; } 

请注意样式对象被删除。

在jQuery中,这是我的最佳select,这真的帮助我! 我等着帮你!

IFRAME

 <iframe src="" frameborder="0" id="iframe" width="100%"></iframe> 

jQuery的

 <script> var valueSize = $( "#iframe" ).offset(); var totalsize = (valueSize.top * 2) + valueSize.left; $( "#iframe" ).height(totalsize); </script> 

这是可能的,使一个“幽灵般的”IFrame,就像它不在那里。

请参阅http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

基本上你使用https://developer.mozilla.org/en-US/docs/DOM/window.postMessage中描述的事件系统;parent.postMessage(..)

这适用于所有现代浏览器!

这就是我要做的事情(在FF / Chrome中testing):

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function autoResize(iframe) { $(iframe).height($(iframe).contents().find('html').height()); } </script> <iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe> 

我知道这个post是旧的,但我相信这是另一种方式。 我只是在我的代码上实现。 在页面加载和页面大小调整时都可以正常工作:

 var videoHeight; var videoWidth; var iframeHeight; var iframeWidth; function resizeIframe(){ videoHeight = $('.video-container').height();//iframe parent div's height videoWidth = $('.video-container').width();//iframe parent div's width iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width } resizeIframe(); $(window).on('resize', function(){ resizeIframe(); }); 

JavaScript被放置在标题中:

 function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } 

这里去iframe html代码:

 <iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe> 

Css样式表

>

 .spec_iframe { width: 100%; overflow: hidden; } 

简单:

 var iframe = $("#myframe"); $(iframe.get(0).contentWindow).on("resize", function(){ iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth); iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight); }); 

这仅使用内联CSS:

 <iframe src="http://example.com" style="resize: both;" onload="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';" onresize="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';"> </iframe>