Cross Domain imposta dinamicamente l'altezza iframe

Ho cercato molti esempi di altezza iframe cross domain ma nessuno di essi è stato in grado di risolvere il problema.Cross Domain imposta dinamicamente l'altezza iframe

Ho un semplice codice HTML indicato di seguito. Voglio ridimensionare l'iframe al suo interno in base all'altezza del contenuto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


</head> 

<body > 
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1"> 
    <tr> 
    <td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0"> 
    </td> 
    </tr>  
    </table> 


     <iframe src="http://mywebapplication.com" width="100%" ></iframe 

     <table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f"> 
     <tr> 
      <td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012. 


      </td> 
     </tr> 
     </table></td> 
    </tr> 
</table> 
</body> 
</html>

quello che ho cercato

utilizzando un secondo file javascript aggiunto per l'iframe per inviare un postMessage torna al genitore.

pagina HTML contenente iframe

<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe> 
     <script type="text/javascript"> 
     var zino_resize = function (event) { 
      alert("sds"); 
      var zino_iframe = document.getElementById('zino_iframe'); 
       if (event.origin !== "http://hrcraft.noviavia.com") { 
       return; 
      } 
      //alert(zino_iframe); 
      if (zino_iframe) { 
       alert(event.data); 
       zino_iframe.style.height = event.data + "px"; 
      } 
     }; 
     if (window.addEventListener) { 
      window.addEventListener("message", zino_resize, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onmessage", zino_resize); 
     } 

window.addEventListener("message", myListener, false); 

function myListener(event) { 
    if (event.origin !== "http://hrcraft.noviavia.com") { 
     return; 
    } 
    //do something 
}

La funzione per l'invio di altezza è aggiunto anche sulla pagina master del MyWebApplication.

Ho seguito questo esempio

http://zinoui.com/blog/cross-domain-iframe-resize

fonte

2015-10-14 tushar narang

L'iframe si trova nello stesso dominio della pagina padre? – www139

NO è per questo che ho menzionato il dominio incrociato –

L'iframe contiene un'applicazione web completa come un portale di lavoro –

Anche se la questione è in relazione alla soluzione di un problema con il proprio codice personale OP. La loro è una libreria testata e collaudata che può essere utilizzata per risolvere il problema del ridimensionamento di un iframe all'altezza del contenuto. Questa libreria si occupa di cross domain e quindi penso che sia degno di nota.

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

si posizionano due file uno nel genitore uno nel bambino (iframe)

nel vostro genitore:

<style>iframe{width:100%}</style> 
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe> 
<script>iFrameResize({log:true})</script>

nel vostro bambino si aggiunge solo questo file:

iframeResizer.contentWindow.min.js

La lib rary si prende cura del ridimensionamento e anche del dominio incrociato. Controlla i documenti.

fonte

2017-03-26 23:17:33 MartinWebb

Grazie che è stato utile, ho aggiornato. – MartinWebb

Non so perché la mia risposta non sia stata accettata, la libreria fa esattamente ciò che l'OP sta tentando di fare, tuttavia è un test repo testato e utilizzato. – MartinWebb

Cross Domain imposta dinamicamente l'altezza iframe

risposta

Problemi correlati