根據其內容在另一個域中自動調整iframe的大小

Question

我有一個將從不同域加載內容的iframe。我想根據內容的高度自動調整iframe的高度。

我已經使用post message，但它是根據窗口的高度調整iframe的高度。

這裏是我的代碼：

var length; 
var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var myEventListener = window[myEventMethod]; 
var myEventMessage = myEventMethod == "attachEvent" ? "onmessage" : "message"; 

myEventListener(myEventMessage, function (e) { 
    var y=document.getElementById(e.data.Id); 
    var x = e.data.Height; 
    y.height = x; 
}, false); 

document.addEventListener('DOMContentLoaded', function() { 
    var widgets = document.getElementsByClassName('Container'); 
    length = widgets.length 
    for (var i = 0, len = length; i < len; i++) { 
     var url = widgets[i].getAttribute("data-url"); 
     var element = document.createElement("iframe"); 
     element.setAttribute("src", url); 
     element.setAttribute("id", "Iframe" + i); 
     widgets[i].appendChild(element); 
     var a = { "Id": "Iframe" + i, "Height": document.body.scrollHeight } 
     window.parent.postMessage(a, "*") 
    } 

}, false); 

這裏我使用document.body.scrollHeight（當前winodw的高度），而不是我想的iframe的身體的高度。

Answer 1

/* client.js */ 
function adjust_iframe_height(){ 
var iframeContainerH = $('#iframecontainer').height(); 
exactHeight = iframeContainerH +10;// Fetches the div content height 

window.parent.postMessage(exactHeight,"*"); // allows this to post to any parent iframe regardless of domain 
} 
$(window).resize(function(){ // Use document ready if needed 
    setTimeout(function(){adjust_iframe_height()}, 2000); // Time Out Set for 5 sec to ensure that it is called after bootstrap auto alignment on resize 
}); 
/* parent.js */ 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
eventer(messageEvent, function(e) { 
    document.getElementById('frame1').height = e.data + 'px'; 
}, false);