Dynamiczny wzrost wysokości iframe zestawu Domeny

Sprawdziłem wiele przykładów wysokości iframe w różnych domenach, ale żaden z nich nie był w stanie rozwiązać problemu.Dynamiczny wzrost wysokości iframe zestawu Domeny

Mam prosty HTML podany poniżej. Chcę zmienić rozmiar elementu iframe wewnątrz zgodnie z wysokością zawartości.

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

Co Próbowałem

stosując drugi plik javascript dodany do iframe wysłać postMessage powrotem do rodziców.

strony HTML zawierającej 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 
}

Funkcja wysyłania wysokość dodaje się również na stronie głównej części mywebapplication.

śledzę tego przykładu

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

Źródło

2015-10-14 tushar narang

Czy element iframe znajduje się w tej samej domenie, co strona nadrzędna? – www139

NIE dlatego wspominałem o domenie internetowej –

Element iframe zawiera pełną aplikację internetową, taką jak portal roboczy –

Choć pytanie jest w odniesieniu do rozwiązywania problemu z PO własnego kodu osobistego. Ich jest wypróbowana i przetestowana biblioteka może być użyta do rozwiązania problemu zmiany rozmiaru elementu iframe na wysokość zawartości. Ta biblioteka zajmuje się między domenami i dlatego myślę, że warto o tym wspomnieć.

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

umieścić dwa pliki jeden w rodzica jednego z dzieckiem (iframe)

w swojej dominującej:

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

W swoim dzieckiem po prostu dodać do tego pliku:

iframeResizer.contentWindow.min.js

The lib Rary dba o zmianę rozmiaru, a także wzajemną domenę. Sprawdź dokumenty.

Źródło

2017-03-26 23:17:33 MartinWebb

Dzięki, że było pomocne, zaktualizowałem. – MartinWebb

Nie wiem, dlaczego moja odpowiedź jest przegłosowana, biblioteka robi dokładnie to, co OP robi, ale jest to test sprawdzający i używany git. – MartinWebb

Dynamiczny wzrost wysokości iframe zestawu Domeny

Odpowiedz

Powiązane problemy