调整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>
