Question

Answer 1

与Sean提到的类似，您可以使用postMessage。我花了很多时间尝试不同的方法来调整iframe的跨域大小但没有运气，直到我偶然发现David Walsh写的这篇伟大的博客文章：http://davidwalsh.name/window-iframe

这是我的代码和David的解决方案的组合。我的解决方案专门用于调整iframe的大小。

在子页面中，找到页面的高度并将其传递给父页面（包含iframe）。将element_id替换为您的元素id（html，body，等等）。

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id).scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads

在父窗口中，添加此代码。将iframe_id替换为您的iframe ID：

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

如果打开控制台，您将在控制台日志中看到打印的高度。这将帮助您调试，这就是我把它留在那里的原因。

最佳，贝克

Answer 2

事情是 - 除了使用跨域消息传递之外别无其他方法，因为您需要从一个域中的文档获取计算高度，到另一个域中的文档。

因此，要么使用postMessage执行此操作（适用于所有现代浏览器），要么花费5分钟从easyXDM调整resize iframe example。

另一方真的只需要将几个文件复制到他们的域中，并在他们的文档中添加一行代码..

Answer 3

看了很多不同的解决方案后，我最终编写了一个简单的小型库来记录一些不同的用例。由于我需要一个支持多个用户生成的iFrame在门户页面上的解决方案，支持的浏览器调整大小并且可以应对iFrame之后加载的主机页面JavaScript。我还添加了对大小调整宽度和回调函数的支持，并允许覆盖body.margin，因为您可能希望将此设置为零。

https://github.com/davidjbradshaw/iframe-resizer

iframe代码只是一个小小的自包含JavaScript，因此它在其他人页面上是一个很好的访客。

然后在主机页面上初始化脚本，并提供以下可用选项。

iFrameResize({
    log                    : true,  // For development
    autoResize             : true,  // Trigering resize on events in iFrame
    contentWindowBodyMargin: 8,     // Set the default browser body margin style (in px)
    doHeight               : true,  // Calculates dynamic height
    doWidth                : false, // Calculates dynamic width
    enablePublicMethods    : true,  // Enable methods within iframe hosted page 
    interval               : 32,    // interval in ms to recalculate body height, 0 to disable refreshing
    scrolling              : false, // Enable the scrollbars in the iFrame
    callback               : function(messageData){ // Callback fn when message is received
        $('p#callback').html(
            '<b>Frame ID:</b> '    + messageData.iframe.id +
            ' <b>Height:</b> '     + messageData.height +
            ' <b>Width:</b> '      + messageData.width + 
            ' <b>Event type:</b> ' + messageData.type
        );
    }
});

Answer 4

我没有在iframe上使用scroll = no，而是将其更改为“auto”。然后，我得到实际窗口的大小

$(window).height();

并将其用作iframe height属性。

嗯，结果是......

我们永远不会有“页面”滚动，只有“iframe”滚动。当你导航时，谁是滚动并不重要，但重要的是只有1。

嗯，用户只需在导航时调整窗口大小就会出现问题。为了解决这个问题，我使用：

setInterval(getDocHeight, 1);

您认为该解决方案会导致任何错误吗？它对我有用，在iFrame上我有php生成的动态对象。我害怕未来的错误......

Answer 5

如今我只知道4个解决方案：

postMessage的。 Some browsers are not supported of course。
window.location.hash操作。我认为这是解决方案＃2 。
easyXDM
window.name Transport

只有第三个可以解决许多问题。例如您可以创建响应式iFrame ;从内部关闭它或您可以与它通信。但要做到这一点，你需要iframe中的iFrame和第三方cookie＆＃34;解决方法（可选）。

我已经创建了一篇关于它的文章，例如：Event-driven cross-domain iFrame

Answer 6

您是否研究过“适合对象”的HTML5属性？将视频/图像缩放到iframe，而不是缩放iframe（如果您抓取的中等大小的图像最终宽度为5,000px，则很好）。 “适合”选项（其他是“封面”和“填充”）使用一种信箱类型的方法来适应源，同时保留纵横比。对于通过HTML5-less进行查看，看起来好像有很多可用的polyfill。这个很棒，但是Edge的一个错误已经使它与微软的新梦魇不相容了大约一年，现在：https://github.com/anselmh/object-fit

编辑：要解决跨域问题，您可以随时在Chrome扩展程序内容脚本中完成工作，因为它认为它是您坚持使用iframe的页面的一部分。

Answer 7

HTTPS另一个链接获取iframe自动高度的高度

https://-a.com内容：

 <!DOCTYPE html>
    <html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        Test Page:
        <hr/>
        <iframe id="iframe" src="https://-b.com" style="width:100%;min-height:600px;border:none;" scrolling="no" ></iframe>
        <script>
        // browser compatibility: get method for event 
        // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
        var myEventMethod = 
            window.addEventListener ? "addEventListener" : "attachEvent";
        // create event listener
        var myEventListener = window[myEventMethod];
        // browser compatibility: attach event uses onmessage
        var myEventMessage = 
            myEventMethod == "attachEvent" ? "onmessage" : "message";
        // register callback function on incoming message
        myEventListener(myEventMessage, function (e) {
            // we will get a string (better browser support) and validate
            // if it is an int - set the height of the iframe #my-iframe-id
            if (e.data === parseInt(e.data)) 
                document.getElementById('iframe').height = e.data + "px";
        }, false);
        </script>
    </body>
    </html>

https://-b.com iframe内容：

<!DOCTYPE html>
<html>
<head>
    <title>Test Iframe Content</title>
    <script type="text/javascript">
    // all content including images has been loaded
    window.onload = function() {
        // post our message to the parent
        window.parent.postMessage(
            // get height of the content
            document.body.scrollHeight
            // set target domain
            ,"*"
        )
    };
</script>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>2
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>3
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>4
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>5
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>6
</body>
</html>

工作表：

xcom http＆gt; ycom https WORK

xcom https＆gt; ycom https WORK

xcom http＆gt; ycom http WORK

xcom https＆gt; ycom http WORK

Answer 8

您是否希望找到iframe中包含的网页的高度？我得到了一些javascript工作，它检查iframe内容的高度，然后将iframe的高度设置为内容的高度。

var Height = document.getElementById('iFrameId').contentWindow.document.body.scrollHeight;

document.getElementById('iFrameId').height = Height;

但是，这仅适用于您在iframe中显示的网页位于同一个域中的情况。如果不是，则无法访问所需信息。因此，访问被拒绝错误。

Answer 9

要调整iframe的大小，这是一个简单的脚本：

这是在头脑中:(这是为PHP脚本编写的，对于html，更改'to'和\“to to'...

<script type='text/javascript'>
<!--
function resizeIframe(id){
/*
this.obj=obj
//this.obj.width=null
//this.obj.width=window.frames[\"sizeframe1\"].document.body.scrollWidth
this.obj.style.height=\"\" // for Firefox and Opera
setTimeout(\"this.obj.style.height=this.obj.contentWindow.document.body.scrollHeight+(notIE?heightOffset:0)\",10) // setTimeout required for Opera
*/

el=document.getElementById(id)
el.style.height='200px' // for Firefox and Opera
setTimeout('el.style.height=el.contentWindow.document.body.scrollHeight+\"px\"',1) // setTimeout required for Opera
}

// -->
</script>"

头部

这是在身体（请记住，这是为一个PHP脚本编写，为html更改所有'到'和\“到''...）

<iframe onload='resizeIframe(this.id)' allowTransparency=\"true\" name='ccpaymentwindow' id='sizeframe1' marginwidth='1' marginheight='1' height='700' width='690' border='0' frameborder='1' scrolling='no' src='ccmslink.php?variable1=" . $variable1 . "'></iframe>

奖金：上面有一些提示。因为它是为PHP脚本设置的，所以你可以用它来做很多事情......了解更多，做更多...

关键是“sizeframe1”....对于同一页面上的多个“resizers”，复制相同的脚本，但更改iframe中的id和头部脚本中的名称，以及中提琴！你在同一页面上有多个缩放器...它工作得非常好！

有phun。

跨域iframe调整大小

9 个答案: