跨域iframe调整大小？

我正在寻找一个良好的跨域iframe调整脚本，根据其内容调整其高度。我也可以访问iframe的源代码的html/css。有没有在那里？跨域iframe调整大小？

2011-04-09 J82

检查出这个简单的解决方案，而不是： HTTP：//计算器。com/questions/7024574/get-and-set-iframe-content-height-auto-resize-dynamic-easy-solution-expanding – Paul 2011-08-11 11:36:51

是我还是所有这些答案都需要你添加一个脚本到* external *页面？ – redben 2014-03-28 13:29:20

EasyXDM可以做这个:) This blog pos牛逼解释它的要点

来源

2011-04-09 18:35:04

我只是看了一下，似乎出于我的专长。 – J82 2011-04-09 18:39:45

有关解释，请参阅http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/ - 实际上并没有更简单的方法。 – 2011-04-10 21:59:15

如果用户是在现代浏览器，就可以解决这个问题很容易与postMessage in HTML5。这里有一个快速的解决方案，工作得很好：

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-04 11:23:55 thomax

它对我有效;唯一的缺点是，远程iFramed网站也需要编辑，如果这是不可编辑的，这将无法正常工作。 – 2015-07-06 16:53:27

在Chrome（版本56.0.2924.87）中尝试了这种方法，但没有成功。不要发生任何错误，但是也不要执行调整大小。 – Stefan 2017-02-14 14:35:22

经过一番研究，我最终使用了HTML5的包装在jQuery pluging中的消息传递机制，它使用各种方法（本主题中描述的一些方法）与旧版浏览器兼容。

最终解决方案非常简单。

在主机（父）页面：

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

});

我已经在Chrome 13+测试此，火狐3.6 + IE7 ，XP和W7上的8和9，OSX和W7上的safari。 ;）

来源

2011-11-30 22:14:06 SuitedSloth

下面的代码为我工作：

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

测试在Opera 11，IE 8 9，FF 8，Chrome的16

来源

2011-12-19 18:13:26

+10

只有当iframe src与父代在同一个域中时，这才起作用。 – jessica 2012-01-07 22:24:43

此页面上的第一个脚本 - 在HTML5中使用postMessage的一 - 也适用于手机上的iframe - 通过调整iframe的内容大小 - 例如联合跨域 - 您可以使用iframe无法在iphones或android中轻松滚动

来源

2012-05-25 18:33:17 Peter

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

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

来源

2013-08-14 23:23:35 user2684310

我有一个完全不同的解决方案来交叉域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-09 01:56:33

跨域iframe调整大小？

回答

相关问题