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

Question

我需要一个解决方案来自动调整iframe的宽度和高度，使其几乎不符合其内容。重点是宽度和高度可以在iframe加载后更改。我想我需要一个事件动作来处理包含在iframe中的body的尺寸变化。

Answer 1

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

Answer 2

跨浏览器jQuery plug-in。

跨鲍泽，跨域library使用mutationObserver保持的iFrame大小的内容和postMessage的iFrame和主机页面之间进行通信。可以使用或不使用jQuery。

Answer 3

这里，如果你不想使用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; 
} 

Answer 4

给出迄今仅占一次过调整所有的解决方案。您提到您希望在内容修改后能够调整iFrame的大小。为了做到这一点，你需要在iFrame中执行一个函数（一旦内容被改变，你需要触发一个事件来说明内容已经改变）。

我被这个问题困住了一段时间，因为iFrame中的代码似乎仅限于iFrame内部的DOM（并且无法编辑iFrame），并且在iFrame之外执行的代码与iFrame之外的DOM卡住（并且无法从iFrame内部获取事件）。

该解决方案来自于发现（通过同事的协助）jQuery可以被告知使用哪个DOM。在这种情况下，父窗口的DOM。

因此，代码如这样做，你需要什么（内嵌框架内运行时）：上述

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

Answer 5

我稍微修改Garnaph的绝佳解决方案。好像他的解决方案根据事件发生前的大小修改了iframe的大小。对于我的情况（通过iframe发送电子邮件）我需要iframe高度在提交后立即更改。例如在提交后显示验证错误或“谢谢”消息。

我只是消除了嵌套点击（）函数，并把它放到我的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> 

为我工作，但不知道跨浏览器的功能。

Answer 6

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

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

有它动态调整大小，你可以这样做：

<script language="javaScript"> 
function resize() 
{ 
    window.parent.autoResize(); 
} 

$(window).on('resize', resize); 
</script> 

Answer 7

我使用此代码其autoAdjust高度：该IFRAME负载添加此页面上

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

然后当他们加载页面时，所有iframe（与类autoHeight）。经过测试，它适用于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(); 
}); 

Answer 8

有可能制作一个类似“幽灵般的”IFrame，它的行为就像它不在那里一样。

见http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

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

这个工程的所有现代浏览器！

Answer 9

这是我会怎么做（在FF /铬测试）：

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

Answer 10

以下几种方法：

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

和另一种选择

<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种替代物滚动

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

WITH第二代码HACK

<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的滚动条，父由“溢出：隐藏”隐藏滚动条和所述iFrame被制成去高达150％的宽度和高度强制页面外的滚动条，并且由于主体没有滚动条，可能不会期望iframe超出页面边界。这隐藏了全幅iFrame的滚动条！

源：设置iframe auto height

Answer 11

这是一个固体证明溶液

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> 

Answer 12

使用上述方法中的全部不能工作。

的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> 

ENV：IE 10，Windows 7的64位

Answer 13

我发现这个大小调整到更好的工作：

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; 

} 

注样式对象是r emoved。

Answer 14

如果有人来到这里： 当我从iframe中删除div时，我的解决方案出现问题 - iframe没有缩短。

有一个jQuery插件，没有工作：

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

Answer 15

我想通了一些尝试后，另一种解决方案。我最初尝试了标记为这个问题的“最佳答案”的代码，但没有奏效。我的猜测是因为我当时程序中的iframe是动态生成的。下面是我使用的代码（它的工作对我来说）：要装入

JavaScript中的iframe中：

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'; 
    }; 

It is necessary to add 4 or more pixels to the height to remove scroll bars (some weird bug/effect of iframes). The width is even stranger, you are safe to add 18px to the width of the body. Also make sure that you have the css for the iframe body applied (below).

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中的测试和在Firefox中的一点点（在Windows XP中）。我仍然有更多测试要做，所以请告诉我这是如何适用于您的。

Answer 16

嵌入式单线解决方案： 以最小尺寸开始并增加至内容尺寸。不需要脚本标签。

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

Answer 17

我知道后是旧的，但我相信这是另一种方式来做到这一点。我刚刚在我的代码上实现。完美的作品无论在页面加载和页面大小调整：

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(); 
}); 

Answer 18

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; 
    } 

Answer 19

后，我曾尝试在地球上的一切，这真的对我的作品。

的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> 

Answer 20

简单：

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); 
}); 

Answer 21

这仅使用内联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> 

Answer 22

在jQuery中，这对我来说是最好的选择，真正帮助我！！我等着帮助你！

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> 

Answer 23

对于angularjs指令属性：

G.directive ('previewIframe', function() { 
return { 
    restrict : 'A', 
    replace : true, 
    scope : true, 
    link : function (scope, elem, attrs) { 
     elem.on ('load', function (e) { 
      var currentH = this.contentWindow.document.body.scrollHeight; 
      this.style.height = eval(currentH) + ((25/100)* eval(currentH)) + 'px'; 
     }); 
    } 
}; 
}); 

通知的百分比，我插入，这样你可以反缩放通常是iframe中完成的，文字，广告等，如果没有执行缩放，只需将其设置为0

Answer 24

如果你可以控制IFRAME内容和父窗口，那么你需要iFrame Resizer。

此库支持自动调整相同和跨域iFrame的高度和宽度，以适应其包含的内容。它提供了一系列功能来解决使用iFrames最常见的问题，其中包括：

• iFrame的高度和宽度调整大小为内容大小。
• 适用于多个嵌套的iFrames。
• 跨域iFrame的域认证。
• 提供一系列页面大小计算方法来支持复杂的CSS布局。
• 检测可能导致页面使用MutationObserver调整大小的DOM更改。
• 检测可能导致页面调整大小的事件（窗口大小调整，CSS动画和过渡，方向更改和鼠标事件）。
• 通过postMessage简化iFrame和主页之间的消息传递。
• 修复了iFrame中的页面链接，并支持iFrame和父页面之间的链接。
• 提供自定义大小和滚动方法。
• 将父级位置和视口大小公开给iFrame。
• 适用于ViewerJS以支持PDF和ODF文档。
• 备用支持到IE8。