Cross Domain setzen iframe Höhe dynamisch

Ich habe viele Beispiele für Cross-Domain-iframe Höhe nachgeschlagen, aber keiner von ihnen konnte das Problem lösen.Cross Domain setzen iframe Höhe dynamisch

Ich habe eine einfache HTML unten angegeben. Ich möchte die Größe des Iframes in der Größe des Inhalts ändern.

<!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>

Was ich versucht habe

eine zweite JavaScript-Datei mit hinzugefügt, um die iframe eine postmessage zurück an die Mutter zu senden.

HTML-Seite mit 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 
}

Die Funktion zur Höhe Senden wird auch auf der Masterseite des mywebapplication hinzugefügt.

Ich verfolge dieses Beispiel

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

Quelle

2015-10-14 tushar narang

Ist der Iframe in derselben Domäne wie die übergeordnete Seite? – www139

NEIN, warum ich erwähnte Cross-Domain –

Die Iframe enthalten eine vollwertige Web-Anwendung wie ein Job-Portal –

Obwohl die Frage in Bezug ist ein Problem mit dem OP eigenen persönlichen Code zu lösen. Ihre ist eine erprobte und getestete Bibliothek kann verwendet werden, um das Problem der Größenänderung eines Iframe auf die Höhe des Inhalts zu lösen. Diese Bibliothek befasst sich mit Cross-Domain und ich denke, es ist erwähnenswert.

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

zwei Dateien legen Sie eine in der Mutter einer im Kind (iframe)

in Ihren Eltern:

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

In Ihrem Kind einfach diese Datei hinzufügen:

iframeResizer.contentWindow.min.js

Die lib rary kümmert sich um die Größenanpassung und auch um die Domain. Überprüfen Sie die Dokumente.

Quelle

2017-03-26 23:17:33 MartinWebb

Danke, das war hilfreich, ich habe aktualisiert. – MartinWebb

Ich weiß nicht, warum meine Antwort abgelehnt wird die Bibliothek tut genau das, was das OP versucht, aber es ist ein Git Repo getestet und verwendet. – MartinWebb

Cross Domain setzen iframe Höhe dynamisch

Antwort

Verwandte Themen