Bir iframe yeniden boyutlandırma içeriğine göre

SORU

30 EYLÜL 2008, Salı

Bir iframe yeniden boyutlandırma içeriğine göre

İGoogle benzeri bir uygulama üzerinde çalışıyorum. Diğer uygulamalardan içerik (başka etki) iframe kullanarak gösterilir.

Nasıl iframe iframe' içerik? yüksekliğine sığacak şekilde yeniden boyutlandırmak mı

Javascript Google kullanır deşifre etmeye çalıştım ama karıştırılmış, ve web bugüne kadar sonuçsuz olmuştur arıyor.

Güncelleme:Lütfen içeriği diğer etki alanlarından yüklenenler olduğunu unutmayın, aynı kökenli ilke geçerlidir.

CEVAP

12 Aralık 2008, Cuma

Bu tür bir sorunu vardı, ama biraz durumunuza ters - başka etki sitelere iframed içeriği buluyorduk, same origin policy da bir sorun oldu. Google trol kaç saat geçirdikten sonra, nihayet bir ihtiyaçlarına uyum sağlamak mümkün olabilir (biraz).. çalışılabilir bir çözüm buldu.

Bir şekilde aynı kökenli ilke, ama gerektirir değişiklikleri hem iframed içerik ve çerçeve sayfa, Çok etmediysen yetenek için talep değişiklikleri her iki taraf da, bu yöntem olmayacak çok yararlı için, korkarım.

Bir tarayıcı cilvesi sağlayan bize etek aynı kökenli ilke - javascript olabilir iletişim kurmak ya da sayfalar üzerinde, kendi etki, ya da sayfalar var iframed, ama asla sayfalarında hangisi çerçeveli, örneğin eğer:

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

home.html framed.html () iframed ve helper.html (aynı etki alanı) ile iletişim kurabilirsiniz.

 Communication options for each page:
  ------------------------- ----------- ------------- ------------- 
 |                         | home.html | framed.html | helper.html |
  ------------------------- ----------- ------------- ------------- 
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
  ------------------------- ----------- ------------- -------------

framed.html helper.html () iframed ama mesaj gönderebilirdeğilhome.html (çocuk çapraz etki alanı ile iletişim kuramıyor üst).

Burada anahtar helper.html framed.html. gelen mesajları alabilirsinizayrıca iletişim kurabilirhome.html ile.

Yani aslında, ne zaman framed.html yükler, artık kendi yükseklik, söyler helper.html, iletilen mesaj home.html, sonra yeniden boyutlandırmak iframe içinde framed.html oturur.

helper.html 20 *gelen mesajları iletmek için bulduk en basit şekilde URL ile bir argüman vardı. Bu, framed.html ilgisi src='' ile iframe belirtildi. onload bu ateşi, kendi yüksekliğini değerlendirir ve bu noktada iframe src ayarlar 25* *için

Benim yukarıda biraz daha net olabilir idare, facebook nasıl There's an explanation here!

< / ^ hr . Kod

www.foo.com/home.html, aşağıdaki javascript kodu gerekli (bu bir .yüklenebilir.bu arada.. herhangi bir etki alanında dosya js,):

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // " 60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height) 60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

www.bar.net/framed.html:

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height=' height '&cacheb=' Math.random();

  }
</script>

www.foo.com/helper.html içeriği:

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]" name "=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

Bunu Paylaş: