iframe altura dinámica dominio cruzado usando jquery.ba-postmessage

Question

Esta es una pregunta que estoy seguro ayudará a cientos de personas en el futuro. Pero el guión está un poco fuera de mi capacidad jQuery. Tengo habilidades básicas jQuery pero no puedo resolver esto.

Básicamente necesito un iFrame (alojado en un dominio aparte) para sentarme en mi sitio web principal. No quiero usar un iFrame, pero en mi situación no tengo otra opción. Necesito que el iFrame cambie su tamaño a la altura del cuerpo dentro del iframe.

Actualmente usando Ben Alman jQuery postMessage plugin, parece que puede hacerlo. Pero el ejemplo actual tiene un código innecesario que permite alternar el tamaño del iFrame ...

No necesito este conmutador, todo lo que necesito es que el iFrame cambie el tamaño de la altura correcta del cuerpo del contenido del iframe. Necesito la altura del iframe para ajustar a medida que la altura del cuerpo cambia dentro del iframe.

Esto es lo que he encontrado hasta ahora ...

He puesto esto en el archivo de contenido iframe
Este es el servidor: http://myiframecontent.com/

<script src="js/jquery.ba-postmessage.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(function(){ 
     // Get the parent page URL as it was passed in, for browsers that don't support 
     // window.postMessage (this URL could be hard-coded). 
     var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')), 
     link; 

     // The first param is serialized using $.param (if not a string) and passed to the 
     // parent window. If window.postMessage exists, the param is passed using that, 
     // otherwise it is passed in the location hash (that's why parent_url is required). 
     // The second param is the targetOrigin. 
     function setHeight() { 
     $.postMessage({ if_height: $('body').outerHeight(true) }, parent_url, parent); 
     }; 

     // Now that the DOM has been set up (and the height should be set) invoke setHeight. 
     setHeight(); 

     // And for good measure, let's listen for a toggle_content message from the parent. 
     $.receiveMessage(function(e){ 
     if (e.data === 'toggle_content') { 
      link.triggerHandler('click'); 
     } 
     }, 'http://mywebsite.com'); 
    }); 

</script> 

He puesto esto en mi sitio web
Esto está en el servidor: http://mywebsite.com/

<script src="js/jquery.ba-postmessage.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function(){ 

     // Keep track of the iframe height. 
     var if_height, 

     // Pass the parent page URL into the Iframe in a meaningful way (this URL could be 
     // passed via query string or hard coded into the child page, it depends on your needs). 

     src = 'http://myiframecontent.com/#' + encodeURIComponent(document.location.href), 

     // Append the Iframe into the DOM. 
     iframe = $('<iframe " src="' + src + '" width="1060" height="1000" scrolling="no" frameborder="0"><\/iframe>') 
      .appendTo('#iframe'); 

     // Setup a callback to handle the dispatched MessageEvent event. In cases where 
     // window.postMessage is supported, the passed event will have .data, .origin and 
     // .source properties. Otherwise, this will only have the .data property. 
     $.receiveMessage(function(e){ 

     // Get the height from the passsed data. 
     var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1')); 

     if (!isNaN(h) && h > 0 && h !== if_height) { 
     // Height has changed, update the iframe. 
      iframe.height(if_height = h); 
     } 

     // An optional origin URL (Ignored where window.postMessage is unsupported). 
     }, 'http://myiframecontent.com/'); 

     // And for good measure, let's send a toggle_content message to the child. 
     $('<a href="#">Show/hide Iframe content<\/a>') 
      .appendTo('#nav') 
      .click(function(){ 
      $.postMessage('toggle_content', src, iframe.get(0).contentWindow); 
      return false; 
     }); 

    }); 
</script> 

<div id="iframe" class="clear"></div> 

Actualmente lo anterior devuelve el ancho actual 1060px pero no cambiar la altura de mi iframe a la altura del cuerpo dentro de mi iframe?

Y también el botón de alternar se está agregando a mi sitio en mi navegación div # nav. Cuando todo lo que necesito es la altura.

Cualquier ayuda sobre esto sería increíble ya que no puedo encontrar ningún ejemplo de trabajo en la red, ¡Gracias!

Este es el script ba-postmessage.js.

Answer 1

Como parece que desea deshacerse de los enlaces, aquí hay un ejemplo de trabajo con contenido de iframe que aumenta periódicamente a través de setInterval().

Esto debe ir al sitio web principal/servidor A: http://mywebsite.com/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Container on domain A (http://mywebsite.com/)</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-postmessage/master/jquery.ba-postmessage.js"></script> 
<script type="text/javascript"> 
    $(function(){ 

     // Update this constant to match your IFrame (contents) URL (no '#' here please) 
     var if_url = 'http://myiframecontent.com/'; 

     // Keep track of the iframe height. 
     var if_height; 

     // Pass the parent page URL into the Iframe in a meaningful way (this URL could be 
     // passed via query string or hard coded into the child page, it depends on your needs). 
     var src = if_url + '#' + encodeURIComponent(document.location.href); 

     // Append the Iframe into the DOM. 
     var iframe = $('<iframe " src="' + src + '" width="200" height="100" scrolling="no" frameborder="0"><\/iframe>') 
      .appendTo('#iframe'); 

     // Setup a callback to handle the dispatched MessageEvent event. In cases where 
     // window.postMessage is supported, the passed event will have .data, .origin and 
     // .source properties. Otherwise, this will only have the .data property. 
     $.receiveMessage(
      function(e){ 
       // Get the height from the passsed data. 
       var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1')); 

       if (!isNaN(h) && h > 0 && h !== if_height) { 
        // Height has changed, update the iframe. 
        iframe.height(if_height = h); 
        // Some user feedback if we want to... 
        $("#ticker").text("has been informed that IFrame contents height is now " + h + " and (re)acted accordingly."); 
       } 
      }, 
      // An optional origin URL (Ignored where window.postMessage is unsupported). 
      if_url 
     ); 

    }); 
</script> 
</head> 
<body> 
<p>Container <span id="ticker"></span></p> 
<div id="iframe"></div> 
<p>Container</p> 
</body> 
</html> 

Y esto debe ir a "iframe" sitio/servidor B: http://myiframecontent.com/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Contents on domain B (http://myiframecontent.com/)</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-postmessage/master/jquery.ba-postmessage.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    // Get the parent page URL as it was passed in, for browsers that don't support 
    // window.postMessage (this URL could be hard-coded). 
    var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')), 
    link; 

    // The first param is serialized using $.param (if not a string) and passed to the 
    // parent window. If window.postMessage exists, the param is passed using that, 
    // otherwise it is passed in the location hash (that's why parent_url is required). 
    // The second param is the targetOrigin. 
    function setHeight() { 
    $.postMessage({ if_height: $('body').outerHeight(true) }, parent_url, parent); 
    }; 

    // Let's increase height, and inform the parent document of new height, every 3 second 
    var i = 1; 
    function increaseHeight() { 
     $("#iframecontents").append("<p>Increase #" + i + "</p>"); 
     i = i + 1; 
     // Now that the DOM has been set up (and the height should be set) invoke setHeight. 
     setHeight(); 
    }; 
    var timer = window.setInterval(increaseHeight, 3000); 
}); 
</script> 
</head> 
<body> 
<p>iframe starts here</p> 
<div id="iframecontents"></div> 
<p>iframe ends here</p> 
</body> 
</html> 

Tenga en cuenta que en su real la implementación de la vida, en tu página IFrame (contenido), necesitarás algún tipo de evento para engancharte y llamar al setHeight().