다른 도메인의 iframe을 콘텐츠에 따라 자동으로 지정합니다.

Question

다른 도메인의 콘텐츠를로드 할 iframe이 있습니다. 콘텐츠의 높이에 따라 iframe의 높이를 자동으로 조정하고 싶습니다.

나는 post message을 사용했지만 창 높이에 따라 iframe의 높이를 조정합니다. 대신 내가 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의 높이)를 사용하고 있습니다 :

여기 내 코드입니다.

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