2015-10-14 14 views
5

Etki alanları arası iframe yüksekliği için birçok örnek aradım ancak bunların hiçbiri sorunu çözemedi.Cross Etki Alanı iframe yüksekliğinin dinamik olarak ayarlanması

Aşağıda verilen basit bir HTML'im var. Içeriğin içeriğine göre iframe yeniden boyutlandırmak istiyorum. i ikinci javascript dosyasını kullanarak

denediniz Ne

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

geri ebeveyne bir postMessage göndermeye iframe eklendi.

HTML Sayfası içeren 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 
} 

yüksekliğini gönderme işlevi de mywebapplication ana sayfasında eklenir. Soru OP kendi kişisel kod ile bir sorunu çözme ile ilgili olarak olsa da

Ben bu örnekte

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

+0

iframe üst sayfayla aynı etki alanında mı? – www139

+2

Hayır, bu yüzden, etki alanı –

+0

'dan bahsetmiştim iframe, iş portalı gibi tam teşekküllü bir web uygulaması içeriyor –

cevap

0

takip ediyorum. Denenmiş ve test edilmiş bir kütüphane, bir iframe'in içerik yüksekliğine yeniden boyutlandırılması sorununu çözmek için kullanılabilir. Bu kütüphane çapraz etkiyle ilgileniyor ve bu yüzden bahsetmeye değer olduğunu düşünüyorum. sadece bu dosya eklemek çocuğunuz olarak

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

:

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

sen (iframe) Ebeveyniniz içinde

çocukta ebeveyn bir iki dosyaları tek tek yerleştirmek

iframeResizer.contentWindow.min.js

The lib rary, yeniden boyutlandırma ve aynı zamanda çapraz alan ile ilgilenir. Dokümanları kontrol et.

+0

Yardımcı oldu, güncelledim. – MartinWebb

+0

Cevabımın neden reddedildiğini bilmiyorum, kütüphane OP'nin yapmaya çalıştığı şeyi yapıyor, yine de git bir deneme ve test ediliyor. – MartinWebb

İlgili konular