跨域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調整大小？

回答

相關問題