调整IFRAME的宽度和高度以配合其内容

Question

调整IFRAME的宽度和高度以配合其内容我需要一个解决办法自动调整这个width和height一种iframe几乎不适合它的内容。关键是宽度和高度可以在iframe已经装好了。我想我需要一个事件行动来处理包含在iframe中的身体尺寸的变化。

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插件.

交叉弓形，跨域图书馆用mutationObserver保持IFRAME的大小与内容和postMessage若要在iframe和主机之间进行通信，请执行以下操作。使用jQuery或不使用jQuery。

Answer 3

到目前为止，给出的所有解决方案只占一次性调整大小。您提到您希望能够在修改内容后调整iframe的大小。为了做到这一点，您需要在iframe中执行一个函数(一旦内容被更改，您需要触发一个事件来表示内容已经更改)。

我被困住了一段时间，因为iframe中的代码似乎仅限于iframe中的DOM(并且无法编辑iframe)，而在iframe之外执行的代码被困在iframe之外的DOM中(并且无法从iframe内部接收一个事件)。

解决方案来自发现(通过同事的帮助)可以告诉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>