调整iframe的宽度和高度以适应其中的内容

我需要一个自动调整iframe的宽度和高度的解决方案，以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化。

当前回答

可以创建一个“幽灵般的”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

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

2013-02-22 13:03:03

其他回答

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

2009-05-04 09:33:39

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

2016-02-27 05:55:23

显然有很多场景，但是，我有相同的域文档和iframe，我能够将此附加到我的iframe内容的末尾:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

这将“找到”父容器，然后设置长度加上50像素的模糊因子以删除滚动条。

这里没有任何东西可以“观察”文档高度的变化，这在我的用例中是不需要的。在我的回答中，我带来了一种引用父容器而不使用父/iframe内容中的id的方法。

2019-04-10 09:58:01

跨浏览器jQuery插件。

cross -bowser, cross - domain library，使用mutationObserver来保持iFrame的大小与内容一致，使用postMessage在iFrame和主机页面之间进行通信。使用或不使用jQuery。

2010-10-04 09:09:33

经过一番试验，我想出了另一个解决办法。我最初尝试了标记为“最佳答案”的代码来回答这个问题，但它不起作用。我的猜测是因为当时程序中的iframe是动态生成的。下面是我使用的代码(它对我有用):

正在加载的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/ iframes的效果)。宽度更奇怪，你可以安全地添加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和firefox (windows xp)中做过一些测试。我还有更多的测试要做，所以请告诉我这是如何为你工作的。

2015-06-17 04:08:51

调整iframe的宽度和高度以适应其中的内容

推荐文章

最新文章

标签