28

我正在寻找一个很好的跨域 iframe 大小调整脚本，它可以根据其内容调整其高度。我也可以访问 iframe 源的 html/css。外面有吗？

4

7 回答 7

35

如果您的用户使用现代浏览器，您可以使用HTML5 中的 postMessage轻松解决这个问题。这是一个运行良好的快速解决方案：

iframe 页面：

<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
  <h3>Got post?</h3>
  <p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>

包含 iframe 的父页面（并且想知道它的高度）：

<script type="text/javascript">
  function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }
</script>

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
于 2011-08-04T11:23:55.647 回答
15

由于未能找到处理所有不同用例的解决方案，我最终编写了一个简单的 js 库，它支持宽度和高度、调整内容大小和一个页面上的多个 iframe。

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

于 2013-08-14T23:23:35.203 回答
1

此页面上的第一个脚本 - 在 HTML5 中使用 postMessage 的脚本 - 也适用于移动设备上的 iframe - 通过将 iframe 调整为内容的大小 - 例如联合跨域 - 您可以轻松地在 iphone 或 android 中滚动，而不是否则可能使用 iframe

于 2012-05-25T18:33:17.127 回答
1

EasyXDM 可以做到这一点 :) 这篇博文解释了它的要点

于 2011-04-09T18:35:04.577 回答
0

我有一个完全不同的解决方案来跨域 iframe 调整大小。它涉及获取您将放入 iframe 的目标页面的副本，将其写入本地，然后将该副本放入您的 iframe 并根据对框架内 dom 的相同域访问调整大小。

一个例子如下：

<?php
            if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
            else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
            $doc = new DOMDocument();
            libxml_use_internal_errors(true);
            $doc->loadHTML($blogpagehtml);
            libxml_use_internal_errors(false);
            $anchors = $doc->getElementsByTagName("a");
            foreach($anchors as $anchor) {
                 $anchorlink=$anchor->getAttribute("href");
                 if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top");
                 else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink));        
            }
            $newblogpagehtml = $doc->saveHTML();
            $token = rand(0,50);
            file_put_contents('tempblog'.$token.'.html',$newblogpagehtml);


?>

            <iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" height="5600"></iframe>
于 2014-02-09T01:56:33.740 回答
0

经过一番研究，我最终使用了 html5 的消息传递机制，该机制封装在一个jQuery 插件中，使其与使用各种方法的旧浏览器兼容（其中一些在这个线程中描述）。

最终解决方案非常简单。

在主机（父）页面上：

// executes when a message is received from the iframe, to adjust 
// the iframe's height
    $.receiveMessage(
        function( event ){
            $( 'my_iframe' ).css({
                height: event.data
            });
    });

// Please note this function could also verify event.origin and other security-related checks.

在 iframe 页面上：

$(function(){

    // Sends a message to the parent window to tell it the height of the 
    // iframe's body

    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    $.postMessage(
        $('body').outerHeight( true ) + 'px',
        '*',
        target
    );

});

我已经在 XP 和 W7 上的 Chrome 13+、Firefox 3.6+、IE7、8 和 9、OSX 和 W7 上的 safari 上对此进行了测试。;)

于 2011-11-30T22:14:06.680 回答
-2

以下代码对我有用： 

var iframe = document.getElementById(id);  
iframe.height = iframe.contentDocument.body.scrollHeight;

在 Opera 11、IE 8 9、FF 8、Chrome 16 上测试

于 2011-12-19T18:13:26.980 回答