實現Porthole.js根據內容高度調整iframe大小的正確方法是什麼？

Question

我試圖使用Porthole.js（http://ternarylabs.github.io/porthole/）將iframe內容的高度傳遞給它的父級（因此父級可以調整iframe的大小以「適合」內容）......但我無法獲得它工作。

父（上abc.com）：

<script src="porthole.min.js"></script> 
<script type="text/javascript"> 
      var guestDomain = 'xyz.com'; 
      function onMessage(messageEvent) { 
       if (messageEvent.origin == "http://" + guestDomain) { 
        if (messageEvent.data['newHeight']) { 
         el = document.getElementById('iframe-name-here'); 
         newHeightvar = (messageEvent.data['newHeight'],60); 
         window.alert("PARENT RECEIVED VALUE (+60): "+newHeightvar); 
         el.setAttribute('height', newHeightvar); 
        }; 
       }; 
      }; 
      var windowProxy; 
      // register proxy window url and iframe name 
      var proxy = new Porthole.WindowProxy("http://xyz.com/proxy.html", "iframe-name-here"); 
      // register an event handler to receive messages 
      proxy.addEventListener(onMessage); 
</script> 

的IFRAME（上xyz.com）：

<script src="js/porthole.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function($) { 
    var proxy = new Porthole.WindowProxy("http://abc.com/proxy.html"); 
    var heightVal = $(document).height(); 
    window.alert("CHILD SENT VALUE: "+heightVal); 
    proxy.post({"newHeight" : heightVal}); 
    }); 
</script> 

我不確定如何更好的測試，看看數據是否被從iframe推送給父母。警報會觸發，但父警報不會告訴我傳遞的數據的值。

基本上，我想要接收iframe的內容大小（messageEvent.data ['newHeight']），將60px添加到它，並相應地設置iframe的高度。我哪裏錯了？ D：

Answer 1

使用window.load而不是ready事件。見doc

var windowProxy; 
window.onload=function(){ 
    // Create a proxy window to send to and receive 
    // messages from the iFrame 
    windowProxy = new Porthole.WindowProxy(
     'http://other-domain.com/proxy.html', 'guestFrame'); 

    // Register an event handler to receive messages; 
    windowProxy.addEventListener(onMessage); 
};