調整跨域iframe的高度

Question

我試圖將iframe高度參數更改爲在iframe中加載的頁面的相同px。加載到iframe中的頁面來自另一個域。

不同的頁面將被加載到iframe中導致iframe內容的高度發生變化，所以我需要獲取iframe內容高度並將其應用於iframe高度參數。

這裏的什麼IM談論一個例子：http://jsfiddle.net/R7Yz9/3/

<div class="site"><a href="http://amazon.com/" target="_top">Amazon </a></div> 
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div> 
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div> 
<iframe id="source" src="http://amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe> 

。

$(document).ready(function() { 
    var iframe = $("#source"); 
    $("a[target=_top]").click(function(){ 
     iframe.attr("src", this.href); 
     return false; 
    }); 
}); 

Answer 1

你得到一個iframe的內容高度是這樣的：

iframe.contentWindow.document.body.scrollHeight 

UPDATE

有可能是雖與跨域問題。這裏有3個來源顯示，以不同的方法：

http://css-tricks.com/cross-domain-iframe-resizing/

How to get height of iframe cross domain

Get value of input field inside an iframe

注：後者展示瞭如何訪問一個字段，但原理是訪問一個身高相同

Answer 2

這是一個小型庫，它解決了將iFrames調整爲包含內容的所有問題。

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

它與跨域問題涉及使用該消息後的API，並且還檢測更改的iFrame的在幾個不同的方式來處理內容。

適用於所有現代瀏覽器和IE8以上。

Answer 3

最小跨域集我用於在頁面上嵌入適合的單個iframe。

在嵌入頁面（含IFRAME）：

<iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe> 
<script type="text/javascript"> 
    // Create browser compatible event handler. 
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
    var eventer = window[eventMethod]; 
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
    // Listen for a message from the iframe. 
    eventer(messageEvent, function(e) { 
    if (isNaN(e.data)) return; 

    // replace #sizetracker with what ever what ever iframe id you need 
    document.getElementById('sizetracker').style.height = e.data + 'px'; 

    }, false); 
</script> 

嵌入式網頁（IFRAME）：

<script type="text/javascript"> 
function sendHeight() 
{ 
    if(parent.postMessage) 
    { 
     // replace #wrapper with element that contains 
     // actual page content 
     var height= document.getElementById('wrapper').offsetHeight; 
     parent.postMessage(height, '*'); 
    } 
} 

// Create browser compatible event handler. 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen for a message from the iframe. 
eventer(messageEvent, function(e) { 

    if (isNaN(e.data)) return; 

    sendHeight(); 

}, 
false); 
</script> 

Answer 4

有在javascript沒有選擇找到跨域iframe高度的高度，但你可以在一些服務器端編程的幫助下完成這樣的事情。我用PHP這個例子

<code> 
    <?php 
$output = file_get_contents('http://yourdomain.com'); 
?> 
<div id='iframediv'> 
    <?php echo $output; ?> 
</div> 

<iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe> 

<script> 
if(window.attachEvent) { 
    window.attachEvent('onload', iframeResizer); 
} else { 
    if(window.onload) { 
     var curronload = window.onload; 
     var newonload = function(evt) { 
      curronload(evt); 
      iframeResizer(evt); 
     }; 
     window.onload = newonload; 
    } else { 
     window.onload = iframeResizer; 
    } 
} 
    function iframeResizer(){ 
     var result = document.getElementById("iframediv").offsetHeight; 

     document.getElementById("iframe").style.height = result; 
     document.getElementById("iframediv").style.display = 'none'; 
     document.getElementById("iframe").style.display = 'inline'; 
    } 
</script> 
</code> 

Answer 5

如果你有機會來操縱正在加載的網站的代碼，下面應該提供一個全面的方法來更新iframe容器隨時隨地的高度的框架內容的高度變化。

將以下代碼添加到您正在加載的頁面（可能位於頁眉中）。每次更新DOM時（如果延遲加載）或窗口大小調整（用戶修改瀏覽器時），此代碼都將發送包含HTML容器高度的消息。

window.addEventListener("load", function(){ 
    if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe 
    send_height_to_parent_function = function(){ 
     var height = document.getElementsByTagName("html")[0].clientHeight; 
     //console.log("Sending height as " + height + "px"); 
     parent.postMessage({"height" : height }, "*"); 
    } 
    // send message to parent about height updates 
    send_height_to_parent_function(); //whenever the page is loaded 
    window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized 
    var observer = new MutationObserver(send_height_to_parent_function);   // whenever DOM changes PT1 
    var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2 
    observer.observe(window.document, config);           // PT3 
}); 

將以下代碼添加到存儲iframe的頁面。這將更新iframe的高度，因爲該消息來自iframe加載的頁面。

<script> 
window.addEventListener("message", function(e){ 
    var this_frame = document.getElementById("healthy_behavior_iframe"); 
    if (this_frame.contentWindow === e.source) { 
     this_frame.height = e.data.height + "px"; 
     this_frame.style.height = e.data.height + "px"; 
    } 
}) 
</script>