Çapraz etki alanı Başka bir iframe yeniden boyutlandırma Q&A

SORU

6 Mayıs 2011, Cuma

Çapraz etki alanı Başka bir iframe yeniden boyutlandırma Q&A

Nasıl başka bir etki alanından bir iframe yeniden boyutlandırma

-Düzenleyin

Bazı çözümler için aşağı kaydırın ya da bunu yapmak için nasıl.. okuyun :D

İframe içindeki herhangi bir şeye ulaşılabilir, hatta etki üzerinde işleyen kaydırma çubukları kodu, kaç saat hack - sonuç sonra. Boşuna birçok teknik denedim.

Zaman kazanmak i bile bu rota aşağı gitmek için sadece etki alanları arası iletişim için sendMessages kullanın. .. Güzel bir örnek: alt Gidin) HTML < için eklentileri vardır; 5

Birkaç gün önce bir siteye iframe entegre etmeye çalışıyorum. Bu diğer tarafı geliştirir ve API(ay sürebilir...) ise kısa vadeli bir çözümdür Ve bu kısa vadeli bir çözüm olarak çünkü işimiz bitti easyXDM - ama zor yeterli, diğer etki alanı için erişim onları p3p başlık eklemek isteyen var kullanmak istiyorum.....

3 iframe

Bulduğum en yakın Çözüm 3 iframe - ama bunu kullanamazsınız, yani zihinsel chrome ve safari gider.

açık krom

http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179

Kaydırma çubukları ölçün

Bu scrollheight deneyin ve formu yeniden boyutlandırmak için nasıl kullanılacağı hakkında bir yazı iyi çalışıyor teoride.. ama düzgün kaydırma yüksekliği.. iframe kullanarak tabi benim değil buldum

document.body.scrollHeight

Bu obvoisly ceset yüksekliği (bu özellikler 100% müşterileri görüntü canvaz dayanır ve x-etki belge yüksekliğe erişemez) kullanır

kullanarak jquery iframe yüksekliği çıkartmayı denedim

$('#frameId').Height()

$('#frameId').clientHeight

$('#frameId').scrollHeight

dönüş değerleri krom ve ıe - ya da sadece farklı bir anlamı yok. Sorun çerçevesi içinde her şeyi inkar bile kaydırma çubuğu görünür

Bilgisayarlı Stilleri

Ama eğer ben incelemek ve eleman iframe chrome içinde bladdy beni iframe (jquery x-etki alanı kullanarak iframe.içinde belgeler boyutlarını gösteriyor heigh - erişim engellendi) 32* *hesaplanan CSS başka bir şey yoktur

Şimdi nasıl krom bu hesaplar? (Düzenle - yeniden işler sayfa oluşturmak kendi render motoru tüm bu ayarları calcualte kullanarak tarayıcı ama her yerde etki alanları arası dolandırıcılık...) önlemek için bağlı değildir

HTML4

HTML4 şartname okudum.x ve salt okunur değerler belge ile açıkta olması gerektiğini söyledi.eleman ama jquery üzerinden erişim engellendi

Proxy Çerçeve

Aşağı site geri proxy ve TAMAM.. bir kullanıcı iframe günlükleri ve proxy gerçek içerik yerine oturum açma sayfası gelene kadar hesaplama yol gittim. Ayrıca bazı iki sayfa arama kabul edilemez

http://www.codeproject.com/KB/aspnet/asproxy.aspx

http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/

Yeniden Oluşturma sayfası

Bu kadar ileri gitmedim ama kaynak ve yeniden işleme sayfa kaynağına bağlı dosya bakar orada jscript motorları vardır . ama bu jscripts hack.. gerektirecektir ve ticari kurumlar için ideal bir durum değil... ve bazı saf java uygulamaları veya sunucu tarafı işleme invole

http://en.wikipedia.org/wiki/Server-side_JavaScript

http://htmlunit.sourceforge.net/ &;-java lt jscript değil

http://maxq.tigris.org/

EDİT 09-2013 GÜNCELLEME

Tüm bu HTML5 yuva ile yapılır. Ama easyXDM olmayan HTML5 şikayet sayfaları için büyük bir geri dönüş.

Çözüm 1Çok Harika Bir Çözüm!

EasyXDM kullanarak

Sunucunuzdaki şeklinde bir sayfa ayarlayın

<html>
<head>
<script src="scripts/easyXDM.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    var transport = new easyXDM.Socket(/** The configuration */{
    remote: "http://www.OTHERDOMAIN.com/resize_intermediate.html?url=testpages/resized_iframe_1.html",

    //ID of the element to attach the inline frame to
    container: "embedded",
    onMessage: function (message, origin) {
        var settings = message.split(",");
        //Use jquery on a masterpage.
        //$('iframe').height(settings[0]);
        //$('iframe').width(settings[1]);

        //The normal solution without jquery if not using any complex pages (default)
        this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
        this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
    }
});

</script>

</head>

<body>
    <div id="embedded"></div>
</body>

ve arayanların etki alanında sadece aynı yerde intermiedate_frame html ve easyxdm.js eklemek gerek. Bir üst klasörü gibi - o zaman göreceli dizinleri yer alan bir klasör sadece senin için erişebilirsiniz.

SEÇENEK 1

Eğer tüm komut dosyaları eklemek istiyor musun diye sayfaları seçenek 2 bak!

O zaman sadece yeniden boyutlandırmak gerçekleşmesi için gereken her sayfa sonuna basit bir jscript ekleyebilirsiniz. Hayır bu sayfalar her easyxdm dahil etmek gerekir.

 <script type="text/javascript">
            window.onload = function(){ parent.socket.postMessage( (parseInt(document.body.clientHeight))   ","   ( document.body.clientWidth ) );  };
        </script>

Gönderdiği parametreleri değiştirildi. Eğer genişliği düzgün sonra çalışmak istiyorsanız, bu otherdomain sayfalarda da benzer bir şey için görünen bir stil somwhere sayfa genişliği eklemek gerekir:

<style type="text/css">
            html, body {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                background-color: rgb(75,0,85);
                color:white;
                width:660px
            }
            a {
            color:white;
            visited:white;
            }
        </style>

Bu benim için harika çalışıyor. Eğer genişliği dahil değilse Kare biraz garip davranır ve biraz'da .. ne olması gerektiğini tahmin etmeye çalışır ve eğer gerekiyorsa psikiyatriste gitmez.

SEÇENEK 2

Ara çerçeve değişiklikleri yoklamak için değiştirin

Ara çerçeve böyle bir şey görünmelidir

    <!doctype html>
<html>
    <head>

        <title>Frame</title>
        <script type="text/javascript" src="easyXDM.js">
        </script>
        <script type="text/javascript">
            var iframe;
            var socket = new easyXDM.Socket({
                //This is a fallback- not needed in many cases
                swf: "easyxdm.swf",
                onReady: function(){
                    iframe = document.createElement("iframe");
                    iframe.frameBorder = 0;
                    document.body.appendChild(iframe);
                    iframe.src = "THE HOST FRAME";
            iframe.onchange = messageBack();

                },
                onMessage: function(url, origin){
                    iframe.src = url;
                }
            });

            //Probe child.frame for dimensions.
            function messageBack(){
                socket.postMessage ( iframe.contentDocument.body.clientHeight   ","   iframe.contentDocument.body.clientWidth); 
            };

            //Poll for changes on children every 500ms.
            setInterval("messageBack()",500); 

        </script>
        <style type="text/css">
            html, body {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
            }

            iframe {
                width: 100%;
                height: 100%;
                border: 0px;
            }
        </style>
    </head>
    <body>

    </body>
</html>

Aralığı boy eğer boyutları her 500ms ileti gönderme isntead değişiklik olursa değiştirmek ve sadece gönder varsa chaeck için daha verimli hale getirilebilir. Bu onay sonra uygularsanız yoklama olarak düşük 50ms gibi değiştirebilirsiniz! iyi eğlenceler

Tarayıcılarda çalışır ve hızlı. Büyük özellikleri hata ayıklama !!

Excellent Work to  Sean Kinsey  who made the script!!!

Çözüm 2(Çalışıyor ama büyük değil)

Eğer karşılıklı bir anlaşma varsa temelde diğer etki alanı ile daha sonra bir kütüphane sendmessage işlemek için ekleyebilirsiniz. Eğer başka bir etki alanı.. daha fazla ya da tam olarak bu değil haklı bulurum çünkü kesmek için aramaya Devam eğer herhangi bir erişiminiz yoksa buldum.

Diğer etki alanı var Head etiketinin içinde yer alacak

<script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.postmessage.min.js" type="text/javascript"></script>
<script src="scripts/club.js" type="text/javascript"></script>

Sadece yeniden boyutlandırmak için aramalar yaptım ve ... içeren bazı club.js

 $(document).ready(function () {   
    var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ),link;
//Add source url hash to each url to authorise callback when navigating inside the frame.Without this clicking any links will break the communication and no messages will be received
$('a[href]').each(function(){ 
     this.href = this.href   document.location.hash ;
});
//Get the dimensions and send back to calling page.
var h1 = document.body.scrollHeight;
var w1 = document.body.scrollWidth;
$.postMessage({ if_height: h1, if_width: w1 }, parent_url, parent );
  });

Bu sayfa tüm zor işleri yapacaktır ve güzel bir senaryo

  //This is almost like request.querystring used to get the iframe data
  function querySt(param, e) {
         gy = e.split("&");
         for (i = 0; i < gy.length; i  ) {
             ft = gy[i].split("=");
             if (ft[0] == param) {
                 return ft[1];
             }
         }
     }


     $(function () {
         // Keep track of the iframe dimensions.
         var if_height;
         var if_width;
         // Pass the parent page URL into the Iframe in a meaningful way (this URL could be
         // passed via query string or hard coded into the child page, it depends on your needs).
         src = 'http://www.OTHERDOAMIN.co.uk/OTHERSTARTPAGE.htm'   '#'   encodeURIComponent(document.location.href),
         // Append the Iframe into the DOM.
         iframe = $('<iframe " src="'   src   '" width="100%" height="100%" scrolling="no" frameborder="0"><\/iframe>').appendTo('#iframe');

         // Setup a callback to handle the dispatched MessageEvent event. In cases where
         // window.postMessage is supported, the passed event will have .data, .origin and
         // .source properties. Otherwise, this will only have the .data property.
         $.receiveMessage(function (e) {
             // Get the height from the passsed data.
             //var h = Number(e.data.replace(/.*if_height=(\d )(?:&|$)/, '$1'));
             var h = querySt("if_height", e.data);
             var w = querySt("if_width", e.data);


             if (!isNaN(h) && h > 0 && h !== if_height) {
                 // Height has changed, update the iframe.
                 iframe.height(if_height = h);
             }
             if (!isNaN(w) && w > 0 && w !== if_width) {
                 // Height has changed, update the iframe.
                 iframe.width(if_width = w);
             }
             //For debugging only really- can remove the next line if you want
             $('body').prepend("Recieved"   h   "hX"   w   "w .. ");
             // An optional origin URL (Ignored where window.postMessage is unsupported).
           //Here you must put the other domain.com name only! This is like an authentication to prevent spoofing and xss attacks! 
         }, 'http://www.OTHERDOMAIN.co.uk');
     });

SEÇENEK 3

Onların artık küçük bir JS kütüphanesi yönetmek için yeniden boyutlandırma çapraz etki alanı iframe, hala gerektirir iFrame için biraz JavaScript, ancak, bu sadece 2.8 k (765 byte Gzip') yerel JS o değil tüm bağımlılıklar ve hiçbir şey yapmıyor kadar denilen Ana Sayfa. Bu diğer insanların sistemlerde güzel bir misafir anlamına gelir.

Bu kod iFrame içeriği boyutta kalmayacak şekilde mutationObserver DOM değişiklikleri belirlemek için kullanır ve ayrıca yeniden boyutlandırmak olaylar arar. IE8 çalışır .

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

CEVAP

21 Mart 2013, PERŞEMBE

Sean bahsedilen ne benzer, postMessage kullanabilirsiniz. Çok zaman David Walsh tarafından çapraz etki alanı yeniden boyutlandırmak iframe yolları ama bu harika blog yazısı üzerinde tökezledi kadar hiç şans farklı harcadım: http://davidwalsh.name/window-iframe

Bu benim kod ve David çözümü bir arada. Benim çözüm özellikle yeniden boyutlandırma iframe yöneliktir.

Çocuk sayfasında, sayfanın yüksekliğini bulmak ve ana sayfaya iframe içeren () geçirir. Eleman ıd ile element_id (html, vücut, ne olursa olsun) değiştirin.

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id).scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads

Ana pencere üzerinde, bu kodu ekleyin. İframe KİMLİĞİ ile iframe_id değiştirin:

<script>
// Create IE   others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data   'px';
},false);
</script>

Eğer konsolunu açın, yükseklik günlük konsolda yazdırılan göreceksiniz. - Bu yüzden hata ayıklama size yardımcı olacaktır.

En iyi, Baker

Bunu Paylaş: