zmiana rozmiaru elementu iframe między domenami


85

Jak zmienić rozmiar elementu iframe z innej domeny

-Edytować

Przewiń w dół, aby znaleźć rozwiązania ... lub przeczytaj, jak tego NIE robić: D

Po wielu godzinach hakowania kodu - wniosek jest taki, że nic wewnątrz iframe nie jest dostępne, nawet paski przewijania, które renderują się w mojej domenie. Próbowałem wielu technik bezskutecznie.

Aby zaoszczędzić czas, nie idź nawet tą drogą, po prostu używaj sendMessages do komunikacji między domenami. Są wtyczki do HTML <5, których używam - Idź na dół po fajny przykład :)


Od kilku dni próbuję zintegrować ramkę iframe ze stroną. Jest to rozwiązanie krótkoterminowe, podczas gdy druga strona rozwija i API (może zająć miesiące ...) A ponieważ jest to rozwiązanie krótkoterminowe, które zrobiliśmy, chcemy używać easyXDM - mam dostęp do innej domeny, ale trudno jest poprosić ich o dodaj nagłówek p3p taki jaki jest .....

3 ramki iframe

Najbliższym rozwiązaniem, które znalazłem, były 3 ramki iframe - ale jest to myślenie o chrome i safari, więc nie mogę tego użyć.

otwórz w chromie

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

Zmierz paski przewijania

Znalazłem kolejny post o tym, jak użyć wysokości przewijania, aby spróbować zmienić rozmiar formularza .. w teorii działa dobrze, ale nie mogłem go poprawnie zastosować przy użyciu wysokości przewijania elementów iframe.

document.body.scrollHeight

To oczywiście używa wysokości ciała (nie można uzyskać dostępu do tych właściwości w 100% jest oparte na wyświetlaniu przez klientów canvaz, a nie wysokości dokumentu x-domains)

Próbowałem użyć jquery, aby uzyskać wysokość ramek iframe

$('#frameId').Height()

$('#frameId').clientHeight

$('#frameId').scrollHeight

zwracają różne wartości w chrome i ie - lub po prostu nie mają sensu. Problem w tym, że wszystko w ramce jest odrzucane - nawet pasek przewijania ...

Style obliczone

Ale jeśli sprawdzę i element w chrome elementu iframe, bladdy pokazuje mi wymiary dokumentów wewnątrz iframe (używając jquery x-domain, aby uzyskać iframe.heigh - odmowa dostępu) Nie ma nic w obliczonym CSS wprowadź opis obrazu tutaj

Jak Chrome to oblicza? (edycja - przeglądarka ponownie renderuje stronę przy użyciu wbudowanego silnika renderującego, aby obliczyć wszystkie te ustawienia - ale nie są nigdzie dołączane, aby zapobiec oszustwom międzydomenowym ... więc ...)

HTML4

Przeczytałem specyfikację HTML4.x i jest tam napisane, że powinny istnieć wartości tylko do odczytu ujawniane przez document.element, ale dostęp do niego jest zabroniony przez jquery

Ramka proxy

Zszedłem na ścieżce proxy z powrotem do witryny i obliczania, co jest w porządku, dopóki użytkownik nie zaloguje się przez iframe, a proxy nie otrzyma strony logowania zamiast rzeczywistej zawartości. Niedopuszczalne jest również dwukrotne wywołanie strony

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

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

Ponownie wyrenderuj stronę

Nie posunąłem się tak daleko, ale istnieją silniki jscript, które sprawdzą źródło i ponownie wyrenderują stronę w oparciu o plik źródłowy. ale wymagałoby to zhakowania tych skryptów jscriptu ... i to nie jest idealna sytuacja dla podmiotów komercyjnych ... i niektórych niezrozumiałych apletów Java lub renderowania po stronie serwera

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

http://htmlunit.sourceforge.net/ <-java not jscript

http://maxq.tigris.org/


EDYTUJ AKTUALIZACJĘ 09-2013

Wszystko to można zrobić za pomocą gniazd HTML5. Ale easyXDM jest świetnym rozwiązaniem zastępczym dla stron skarg innych niż HTML5.

Rozwiązanie 1 Bardzo dobre rozwiązanie!

Korzystanie z easyXDM

Na swoim serwerze zakładasz stronę w postaci

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

a na domenie dzwoniącej wystarczy dodać intermiedate_frame html i easyXDM.js w tym samym miejscu. Podobnie jak folder nadrzędny - możesz wtedy uzyskać dostęp do katalogów względnych lub folderu zawartego tylko dla Ciebie.

OPCJA 1

Jeśli nie chcesz dodawać skryptów do wszystkich stron, spójrz na opcję 2!

Następnie mogą po prostu dodać prosty skrypt jscript na końcu każdej strony, na której chcesz zmienić rozmiar. Nie ma potrzeby dołączania easyxdm na każdej z tych stron.

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

Zmodyfikowałem parametry, które wysyła. Jeśli chcesz, aby szerokość działała poprawnie, strony w innej domenie muszą zawierać szerokość strony w stylu, który wygląda podobnie do:

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

To działa świetnie dla mnie. Jeśli szerokość nie jest podana, ramka zachowuje się trochę dziwnie i jakby próbuje odgadnąć, jaka powinna być ... i nie zmniejszy się, jeśli tego potrzebujesz.

OPCJA 2

Zmodyfikuj ramkę pośrednią, aby odpytywać o zmiany

Twoja ramka pośrednia powinna wyglądać mniej więcej tak.

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

Interwał mógłby być bardziej efektywny, aby zmierzyć rozmiar, jeśli rozmiar się zmienił i wysłać tylko wtedy, gdy zmiany wymiarów nie są zakończone wysyłaniem wiadomości co 500 ms. Jeśli zastosujesz tę kontrolę, możesz zmienić odpytywanie już od 50 ms! baw się dobrze


Działa w różnych przeglądarkach i jest szybki. Świetne funkcje debugowania !!

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

Rozwiązanie 2 (działa, ale nie jest świetne)

Więc zasadniczo, jeśli masz wzajemną umowę z inną domeną, możesz dodać bibliotekę do obsługi sendmessage. Jeśli nie masz dostępu do innej domeny ... Szukaj dalej hacków - ponieważ nie mogłem znaleźć ani w pełni uzasadnić tych, które znalazłem.

Więc druga domena będzie zawierała je w tagu Head

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

W pliku club.js jest tylko kilka niestandardowych wywołań, które wykonałem w celu zmiany rozmiaru i zawiera ...

 $(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 );
  });

Twoja strona wykona całą ciężką pracę i ma ładny skrypt ...

  //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');
     });

OPCJA 3

Jest to teraz mała biblioteka JS do zarządzania zmianą rozmiaru międzydomenowych ramek iFrame, nadal wymaga, aby iFrame zawierało trochę JavaScript, jednak to tylko 2,8k (765 bajtów spakowanych Gzipem) natywnego JS, który nie ma żadnych zależności i nic nie robi, dopóki nie zostanie wywołane przez stronę nadrzędną. Oznacza to, że jest miłym gościem w systemach innych ludzi.

Ten kod wykorzystuje mutationObserver do wykrywania zmian DOM, a także wyszukuje zdarzenia zmiany rozmiaru, dzięki czemu element iFrame pozostaje dopasowany do zawartości. Działa w IE8 +.

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


4
przykład easyXDM w rzeczywistości ma dużo mniej kodu, nie polega na zewnętrznych bibliotekach, a także działa w starszych przeglądarkach :) I tak, jestem stronniczy, ponieważ jestem autorem, ale nadal ...
Sean Kinsey

Wypróbowałem easyXDM, ale nie udało mi się uzyskać wewnętrznego przeglądania ramek do innych linków do pracy .. Szukałem przykładów ... były linki, które są zepsute, a przykładowa strona nie była wyczyszczona .. Zadziałało! i była moją oryginalną odpowiedzią… ale użyłem tego. Czy możesz wrzucić sposób na wewnętrzne przeglądanie… Patrzyłem i patrzyłem…
Piotr Kula

@ppumkin przykład, który jest dostarczany z pobranym plikiem , w pełni obsługuje wewnętrzne przeglądanie. Zepsuty link prawdopodobnie pochodzi z eksperymentu, który przeprowadziłem, ale serwer został opróżniony w pewnym momencie ...
Sean Kinsey

1
Tak spojrzałem na to - i spojrzałem i spojrzałem: D z jakiegoś powodu nie mogłem sprawić, by działało z moją witryną. Spróbuje znowu.
Piotr Kula

1
To działa - ale jeśli kliknę link w tej domenie, ponownie załaduje stronę - z twoją biblioteką - ale nie mogę otrzymać żadnej wiadomości. W jaki sposób mogę sprawić, by przyjmował wnioski niezależnie od tego, skąd pochodzą. A do czego służy ten plik easyxdm.swf? :)
Piotr Kula

Odpowiedzi:


10

Rzecz w tym, że nie ma innego sposobu niż użycie do tego celu przesyłania wiadomości międzydomenowych, ponieważ musisz pobrać obliczoną wysokość z dokumentu w jednej domenie do dokumentu w innej domenie.

Więc albo robisz to za pomocą postMessage(działa we wszystkich nowoczesnych przeglądarkach), albo spędzasz 5 minut na dostosowywaniu przykładu zmiany rozmiaru elementu iframe z easyXDM.

Druga strona naprawdę musi tylko skopiować kilka plików do swojej domeny i dodać jedną linię kodu do swojego dokumentu.


Wręcz przeciwnie, przyjacielu. Znalazłem sposób na zmianę rozmiaru elementu iframe z krzyżowej strony doimain na rozmiar dokumentu iframe bez przewijania. to trochę hacky, ale opublikuję później ... to takie proste, że niewiarygodne.
Piotr Kula

tak ... użyłem wtyczki sendmessage jquwery - i chociaż znalazłem inny hack - fałszywie pozytywny ...;) dzięki za dobrą wskazówkę!
Piotr Kula

Cóż, czasami najlepiej jest słuchać swoich rówieśników - szanse na odkrycie magicznego hacka, którego nikt inny nie ma, są dość niewielkie :)
Sean Kinsey

Wyobraź sobie, że gdybym to zrobił - przez zwykłe trafienie i chybienie - byłoby fantastycznie. Ale tak- slim: D Dzięki
Piotr Kula

Prawda - jeśli nic więcej, przynajmniej próbowałeś, eksperymentowałeś i być może nauczyłeś się również czegoś nowego :)
Sean Kinsey

25

Podobnie jak wspomniał Sean, możesz użyć postMessage. Spędziłem tak dużo czasu na próbowaniu różnych sposobów zmiany rozmiaru iframe przy użyciu wielu domen, ale bez powodzenia, dopóki nie natknąłem się na ten wspaniały post na blogu Davida Walsha: http://davidwalsh.name/window-iframe

To jest połączenie mojego kodu i rozwiązania Davida. Moje rozwiązanie jest ukierunkowane specjalnie na zmianę rozmiaru ramek iframe.

Na stronie podrzędnej znajdź wysokość strony i przekaż ją do strony nadrzędnej (zawierającej element iframe). Zastąp element_id swoim identyfikatorem elementu (html, body, cokolwiek).

<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

W oknie nadrzędnym dodaj ten kod. Zastąp iframe_id swoim identyfikatorem iframe:

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

Jeśli otworzysz konsolę, zobaczysz wysokość drukowaną w dzienniku konsoli. Pomoże ci to w debugowaniu, dlatego go tam zostawiłem.

Najlepsze, Baker


Działa to świetnie, ale nie tak bardzo w IE. Musiałem wysłać 2 zmienne, ale IE nie zaakceptuje "danych", jeśli jest to tablica lub obiekt. Jednak po prostu utworzyłem dane jako data = var1 + "|" var2. W przypadku rodzica po prostu podzielisz ciąg na | i odzyskaj swoje 2 vars.
dbonneville

5

Rozejrzawszy się za wieloma różnymi rozwiązaniami tego problemu, napisałem prostą, małą bibliotekę, aby uwzględnić szereg różnych przypadków użycia. Ponieważ potrzebowałem rozwiązania obsługującego wiele ramek iFrame generowanych przez użytkowników na stronie portalu, obsługiwana przeglądarka zmienia rozmiar i mogłaby poradzić sobie z ładowaniem JavaScript strony hosta po elemencie iFrame. Dodam również obsługę rozmiaru do szerokości i funkcję zwrotną oraz zezwalam na nadpisanie body.margin, ponieważ prawdopodobnie będziesz chciał ustawić to na zero.

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

Kod iframe to po prostu mały samodzielny kod JavaScript, dzięki czemu jest dobrym gościem na stronach innych osób.

Skrypt jest następnie inicjowany na stronie hosta z następującymi dostępnymi opcjami.

iFrameResize({
    log                    : true,  // For development
    autoResize             : true,  // Trigering resize on events in iFrame
    contentWindowBodyMargin: 8,     // Set the default browser body margin style (in px)
    doHeight               : true,  // Calculates dynamic height
    doWidth                : false, // Calculates dynamic width
    enablePublicMethods    : true,  // Enable methods within iframe hosted page 
    interval               : 32,    // interval in ms to recalculate body height, 0 to disable refreshing
    scrolling              : false, // Enable the scrollbars in the iFrame
    callback               : function(messageData){ // Callback fn when message is received
        $('p#callback').html(
            '<b>Frame ID:</b> '    + messageData.iframe.id +
            ' <b>Height:</b> '     + messageData.height +
            ' <b>Width:</b> '      + messageData.width + 
            ' <b>Event type:</b> ' + messageData.type
        );
    }
});

Niezły koleś. Zdecydowanie coś, co będzie używane przez wielu ludzi! +1
Piotr Kula

1
co mam zrobić, jeśli nie mam dostępu do domeny zdalnej? Dzięki
Bala Peterson

@BalaPeterson, jeśli nie możesz uzyskać dostępu do domeny zdalnej, to nie możesz tego zrobić ze względu na ograniczenia bezpieczeństwa w przeglądarce.
David Bradshaw,

0

Zamiast używać scroll = no w ramce iframe, zmieniam ją na „auto”. Następnie otrzymuję rozmiar rzeczywistego okna

$(window).height();

i użyj tego jako atrybutu wysokości elementu iframe.

Cóż, wynik jest ...

Nigdy nie będziemy mieć przewijania „strony”, tylko przewijanie „iframe”. Kiedy nawigujesz, nie ma znaczenia, kto jest zwojem, ale ważne jest, że jest tylko 1.

Cóż, problem polega na tym, że użytkownik po prostu zmienia rozmiar okna podczas nawigacji. Aby to rozwiązać, używam:

setInterval(getDocHeight, 1);

Czy myślałeś, że to rozwiązanie spowoduje jakieś błędy? To działa dla mnie, a na iFrame miałem dynamiczny kontekt wygenerowany przez php. Boję się przyszłych błędów z tym ...


2
Oczywiście przewijanie „iframe” będzie zawsze miało ten sam rozmiar strony. Tak więc podczas nawigacji widzisz go tak, jakby był przewijaniem „strony”.
Elton Morais

0

Obecnie znam tylko 4 rozwiązania:

Dopiero trzecia może rozwiązać wiele problemów. Na przykład możesz utworzyć responsywną ramkę iFrame ; zamknij go od wewnątrz lub możesz się z nim komunikować . Ale aby to zrobić, potrzebujesz elementu iFrame w iframe i obejścia „plików cookie innych firm” (opcjonalnie).

Stworzyłem o tym artykuł z przykładem: iFrame międzydomenowa sterowana zdarzeniami


0

Czy przyjrzałeś się atrybutom HTML5 „dopasowanym do obiektu”? Skaluje wideo / obrazy do elementu iframe, zamiast skalować element iframe (fajnie, jeśli złapiesz obraz o średniej wielkości, który kończy się na 5000 pikseli szerokości). Opcja „Dopasuj” (inne to „okładka” i „wypełnienie”) wykorzystuje podejście typu „letterbox”, aby dopasować źródło przy zachowaniu współczynników proporcji. Wygląda na to, że do oglądania przez program HTML5 bez HTML5 jest dostępnych mnóstwo polyfillów. Ten jest świetny, ale błąd na końcu Edge sprawił, że był niezgodny z New Nightmare Microsoftu przez około rok, teraz: https://github.com/anselmh/object-fit

EDYCJA: Aby obejść problemy między domenami, zawsze możesz po prostu wykonać pracę w skrypcie zawartości rozszerzenia Chrome, ponieważ uważa, że ​​jest to część strony, na której trzymasz element iframe.


0

HTTPS inny link uzyskuje wysokość do autoheight elementu iframe

Treść https://-a.com :

 <!DOCTYPE html>
    <html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        Test Page:
        <hr/>
        <iframe id="iframe" src="https://-b.com" style="width:100%;min-height:600px;border:none;" scrolling="no" ></iframe>
        <script>
        // browser compatibility: get method for event 
        // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
        var myEventMethod = 
            window.addEventListener ? "addEventListener" : "attachEvent";
        // create event listener
        var myEventListener = window[myEventMethod];
        // browser compatibility: attach event uses onmessage
        var myEventMessage = 
            myEventMethod == "attachEvent" ? "onmessage" : "message";
        // register callback function on incoming message
        myEventListener(myEventMessage, function (e) {
            // we will get a string (better browser support) and validate
            // if it is an int - set the height of the iframe #my-iframe-id
            if (e.data === parseInt(e.data)) 
                document.getElementById('iframe').height = e.data + "px";
        }, false);
        </script>
    </body>
    </html>

https://-b.com zawartość iframe:

<!DOCTYPE html>
<html>
<head>
    <title>Test Iframe Content</title>
    <script type="text/javascript">
    // all content including images has been loaded
    window.onload = function() {
        // post our message to the parent
        window.parent.postMessage(
            // get height of the content
            document.body.scrollHeight
            // set target domain
            ,"*"
        )
    };
</script>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>2
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>3
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>4
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>5
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>6
</body>
</html>

Stół do pracy:

xcom http> ycom https WORK

xcom https> ycom https WORK

xcom http> ycom http WORK

xcom https> ycom http WORK

Zrzut ekranu pracy testowej


-2

Czy chcesz znaleźć wysokość strony zawartej w elemencie iframe? Mam działający javascript, który sprawdza wysokość zawartości iframe, a następnie ustawia wysokość iframe na wysokość treści.

var Height = document.getElementById('iFrameId').contentWindow.document.body.scrollHeight;

document.getElementById('iFrameId').height = Height;

Działa to jednak tylko wtedy, gdy strona, którą wyświetlasz w elemencie iframe, znajduje się w tej samej domenie. Jeśli tak nie jest, nie możesz uzyskać dostępu do wymaganych informacji. W związku z tym błąd odmowy dostępu.


Tak, już tego próbowałem. Działa świetnie… na tej samej domenie, jak powiedziałeś… Powiedz mi - skąd przeglądarka wie, ile wynosi 100%, kiedy początkowo oblicza wysokość? dlaczego nie możemy również uzyskać dostępu do tych wartości? Chrome przechowuje to w wyliczonych stylach dla każdej strony w iframe, nawet x-domain ...
Piotr Kula

Wysokość jest obliczana w zależności od zawartości i posiadanych atrybutów. Wysokość elementu jest niepewna, dopóki elementy podrzędne nie zostaną wyrenderowane.
MarioRicalde

w jaki sposób mogę uzyskać renderowane wartości? tak jak robi to inspekcja w chrome?
Piotr Kula

-1, ponieważ to nie działa w wielu domenach, o co prosił.
Sean Kinsey

Nie możesz uzyskać wartości. Inspektor może to zrobić, ponieważ ma uprawnienia na poziomie „rozszerzenia przeglądarki”, a nie uprawnienia na poziomie „strony internetowej o innym pochodzeniu”.
Quentin

-2

Aby zmienić rozmiar elementu iframe, oto prosty skrypt:

to idzie do głowy: (to zostało napisane dla skryptu php, dla html, zmień 'na "i \" na' ...

<script type='text/javascript'>
<!--
function resizeIframe(id){
/*
this.obj=obj
//this.obj.width=null
//this.obj.width=window.frames[\"sizeframe1\"].document.body.scrollWidth
this.obj.style.height=\"\" // for Firefox and Opera
setTimeout(\"this.obj.style.height=this.obj.contentWindow.document.body.scrollHeight+(notIE?heightOffset:0)\",10) // setTimeout required for Opera
*/

el=document.getElementById(id)
el.style.height='200px' // for Firefox and Opera
setTimeout('el.style.height=el.contentWindow.document.body.scrollHeight+\"px\"',1) // setTimeout required for Opera
}

// -->
</script>"

koniec głowy

to idzie do treści (pamiętaj, że zostało to napisane dla skryptu php, dla html zmień wszystkie 'na "i \" na' ...)

<iframe onload='resizeIframe(this.id)' allowTransparency=\"true\" name='ccpaymentwindow' id='sizeframe1' marginwidth='1' marginheight='1' height='700' width='690' border='0' frameborder='1' scrolling='no' src='ccmslink.php?variable1=" . $variable1 . "'></iframe>

bonus: powyżej jest kilka wskazówek. Ponieważ jest ustawiony na skrypty php, możesz z nim wiele zrobić ... aby dowiedzieć się więcej, zrób więcej ...

kluczem do tego jest "sizeframe1" .... dla wielu "resizerów" na tej samej stronie, skopiuj ten sam skrypt, ale zmień id w iframe i nazwę w skrypcie w head i viola! masz wiele zmian rozmiaru na tej samej stronie ... działa bardzo dobrze!

mam phun.


Myślę, że nie odpowiadasz na zadane pytanie.
Andrew Barber,

Tak - to jest czysty javascript do zmiany rozmiaru ramki iframe w tej samej domenie. Korzystanie z jQuery jest w jakikolwiek sposób znacznie łatwiejsze. To nie będzie działać w różnych witrynach i nie ma tu nic specjalnego, co na to pozwoli. A nie ma czegoś takiego jak skrypty php ?!
Piotr Kula
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.