ridimensionamento iframe interdominio


85

Come ridimensiono un iframe da un altro dominio

-Modificare

Scorri verso il basso per alcune soluzioni .. o leggi come NON farlo: D

Dopo molte ore di hacking del codice, la conclusione è che qualsiasi cosa all'interno dell'iframe non è accessibile, anche le barre di scorrimento che vengono visualizzate sul mio dominio. Ho provato molte tecniche senza alcun risultato.

Per risparmiare tempo, non seguire nemmeno questa strada, usa sendMessages per le comunicazioni tra domini. Ci sono plug-in per HTML <5 che uso - Vai in fondo per un bell'esempio :)


Negli ultimi giorni ho provato a integrare un iframe in un sito. Questa è una soluzione a breve termine mentre l'altro lato sviluppa e API (potrebbe richiedere mesi ...) E poiché questa è una soluzione a breve termine, abbiamo voluto usare easyXDM- Ho accesso all'altro dominio ma è abbastanza difficile chiedergli di farlo aggiungi l'intestazione p3p così com'è .....

3 iframe

La soluzione più vicina che ho trovato sono stati i 3 iframe, ma funziona mentalmente con Chrome e Safari, quindi non posso usarlo.

aperto in cromo

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

Misura le barre di scorrimento

Ho trovato un altro post su come usare lo scrollheight per provare a ridimensionare il form .. in teoria funziona bene ma non ho potuto applicarlo correttamente usando l'altezza di scroll iframe ..

document.body.scrollHeight

Ovviamente utilizza l'altezza del corpo (non è possibile accedere a queste proprietà al 100% si basa sul client di visualizzazione canvaz e non sull'altezza del documento x-domains)

Ho provato a usare jquery per ottenere l'altezza degli iframe

$('#frameId').Height()

$('#frameId').clientHeight

$('#frameId').scrollHeight

restituisce valori diversi in chrome e ie - o semplicemente non ha alcun senso. Il problema è che tutto all'interno del frame è negato, anche la barra di scorrimento ...

Stili calcolati

Ma se ispeziono un elemento in chrome dell'iframe, bladdy mi mostra le dimensioni dei documenti all'interno dell'iframe (usando jquery x-domain per ottenere iframe.heigh - accesso negato) Non c'è niente nel CSS calcolato inserisci qui la descrizione dell'immagine

Ora come lo calcola Chrome? (modifica: il browser esegue nuovamente il rendering della pagina utilizzando il suo motore di rendering integrato per calcolare tutte queste impostazioni, ma non sono allegati da nessuna parte per prevenire frodi interdominio .. quindi ..)

HTML4

Ho letto le specifiche di HTML4.x e dice che dovrebbero esserci valori di sola lettura esposti tramite document.element ma l'accesso è negato tramite jquery

Frame proxy

Ho seguito il percorso per eseguire il proxy del sito e calcolare quale è OK .. finché un utente non accede tramite l'iframe e il proxy ottiene una pagina di accesso invece del contenuto effettivo. Anche per alcuni chiamare la pagina due volte non è accettabile

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

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

Renderizza la pagina

Non sono andato così lontano ma ci sono motori jscript là fuori che guarderanno l'origine e renderanno nuovamente la pagina in base al file sorgente. ma richiederebbe l'hacking di quei jscripts .. e questa non è una situazione ideale per entità commerciali ... e alcuni invocano applet java pure o rendering lato server

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

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

http://maxq.tigris.org/


EDIT 09-2013 AGGIORNAMENTO

Tutto questo può essere fatto con i socket HTML5. Ma easyXDM è un ottimo fallback per le pagine di reclamo non HTML5.

Soluzione 1 Ottima soluzione!

Utilizzando easyXDM

Sul tuo server hai impostato una pagina sotto forma di

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

e sul dominio del chiamante devono solo aggiungere intermiedate_frame html e easyXDM.js nello stesso posto. Come una cartella principale, puoi accedere alle directory relative oa una cartella contenuta solo per te.

OPZIONE 1

Se non vuoi aggiungere script a tutte le pagine guarda l'opzione 2!

Quindi possono semplicemente aggiungere un semplice jscript alla fine di ciascuna delle pagine di cui hai bisogno per il ridimensionamento. Non è necessario includere easyxdm in ciascuna di queste pagine.

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

Ho modificato i parametri che invia. Se vuoi che la larghezza funzioni correttamente, le pagine sull'altro dominio devono includere la larghezza della pagina in uno stile che assomigli a qualcosa di simile a:

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

Questo funziona alla grande per me. Se la larghezza non è inclusa, la cornice si comporta in modo un po 'strano e cerca di indovinare cosa dovrebbe essere .. e non si restringe se ne hai bisogno.

OPZIONE 2

Modificare il frame intermedio per eseguire il polling delle modifiche

Il tuo frame intermedio dovrebbe assomigliare a questo ..

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

L'intervallo potrebbe essere reso più efficiente per verificare se le dimensioni sono cambiate e inviare solo se le dimensioni cambiano senza inviare messaggi ogni 500 ms. Se si implementa questo controllo, è possibile modificare il polling fino a 50 ms! divertiti


Funziona su tutti i browser ed è veloce. Ottime funzionalità di debug !!

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

Soluzione 2 (funziona ma non eccezionale)

Quindi, in pratica, se hai un accordo reciproco con l'altro dominio, puoi aggiungere una libreria per gestire sendmessage. Se non hai alcun accesso all'altro dominio .. Continua a cercare altri hack, perché non sono riuscito a trovarli o a giustificarli completamente che ho trovato.

Quindi l'altro dominio includerà questi nel tag 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>

Nel club.js ci sono solo alcune chiamate personalizzate che ho fatto per ridimensionare le chiamate e contiene ..

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

E la tua pagina farà tutto il lavoro duro e ha una bella sceneggiatura ...

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

OPZIONE 3

La loro ora è una piccola libreria JS per la gestione del ridimensionamento di iFrame interdominio, richiede ancora che l'iFrame contenga un po 'di JavaScript, tuttavia, questo è solo 2.8k (765 byte compressi con Gzip) di JS nativo che non ha dipendenze e non fa nulla finché non viene chiamato dalla pagina genitore. Ciò significa che è un buon ospite sui sistemi di altre persone.

Questo codice utilizza mutationObserver per rilevare le modifiche del DOM e controlla anche gli eventi di ridimensionamento, in modo che l'iFrame rimanga dimensionato in base al contenuto. Funziona in IE8 +.

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


4
l'esempio easyXDM in realtà ha molto meno codice, non si basa su librerie esterne e funziona anche nei browser meno recenti :) E sì, sono di parte poiché sono l'autore, ma comunque ..
Sean Kinsey

Ho provato easyXDM ma non sono riuscito a far funzionare la navigazione interna del frame verso altri collegamenti .. Ho cercato esempi .. c'erano collegamenti interrotti e la pagina di esempio non era da cancellare .. Ha funzionato! ed era la mia risposta originale .. ma ho usato questo. Puoi pubblicare un modo per la navigazione interna per favore .. ho guardato e guardato ..
Piotr Kula

@ppumkin l' esempio fornito con il download supporta pienamente la navigazione interna. Il collegamento interrotto è probabilmente a un esperimento che ho fatto, ma a un certo punto il server è stato scaricato ..
Sean Kinsey

1
Sì, l'ho guardato - e guardato e guardato: D per qualche motivo non sono riuscito a farlo funzionare con il mio sito. Ci riproverò.
Piotr Kula

1
Funziona, ma se faccio clic su un collegamento su quel dominio, ricarica la pagina con la tua libreria, ma non riesco a ricevere alcun messaggio. Come posso fare in modo che accetti le richieste indipendentemente da dove provengono. E a cosa serve questo easyxdm.swf? :)
Piotr Kula

Risposte:


10

Il fatto è che non c'è altro modo che utilizzare la messaggistica tra domini per questo poiché è necessario ottenere l'altezza calcolata da un documento in un dominio a un documento in un dominio diverso.

Quindi, o lo fai usando postMessage(funziona in tutti i browser moder), o impieghi 5 minuti ad adattare l' esempio di iframe di ridimensionamento da easyXDM.

L'altra parte deve solo copiare alcuni file nel proprio dominio e aggiungere una singola riga di codice al documento.


Al contrario, amico mio. Ho trovato un modo per ridimensionare l'iframe da una pagina doimain incrociata alla dimensione del documento iframe e senza barre di scorrimento. è un po 'hacky ma posterò più tardi .. è così semplice è incredibile.
Piotr Kula

sì ... ho usato il plugin sendmessage jquwery - anche se ho trovato un altro hack - falso positivo ..;) grazie per il buon suggerimento!
Piotr Kula

Bene, a volte la cosa migliore è ascoltare i tuoi coetanei: le probabilità che tu scopra qualche trucco magico che nessun altro ha sono piuttosto scarse :)
Sean Kinsey

Immagina se lo facessi - per puro caso - sarebbe fantastico. Ma sì, sottile: D Grazie
Piotr Kula

Vero - se non altro, hai almeno provato, sperimentato e forse anche imparato qualcosa di nuovo :)
Sean Kinsey

25

Simile a quello che ha menzionato Sean, puoi usare postMessage. Ho passato così tanto tempo a provare diversi modi per ridimensionare iframe con cross-domain, ma senza fortuna finché non sono incappato in questo fantastico post sul blog di David Walsh: http://davidwalsh.name/window-iframe

Questa è una combinazione del mio codice e della soluzione di David. La mia soluzione è orientata specificamente al ridimensionamento degli iframe.

Nella pagina figlia, trova l'altezza della pagina e passala alla pagina principale (che contiene l'iframe). Sostituisci element_id con il tuo ID elemento (html, body, qualunque cosa).

<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

Nella finestra principale, aggiungi questo codice. Sostituisci iframe_id con il tuo ID 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>

Se apri la console, vedrai l'altezza stampata nel registro della console. Questo ti aiuterà nel debug ed è per questo che l'ho lasciato lì.

Meglio, Baker


Funziona benissimo ma non altrettanto in IE. Ho dovuto inviare 2 variabili, ma IE non accetterà "dati" se è un array o un oggetto. Tuttavia, ho semplicemente creato i dati come data = var1 + "|" var2. Sul genitore, dividi semplicemente la stringa su | e riprenditi i tuoi 2 vars.
dbonneville

5

Dopo aver cercato molte soluzioni diverse a questo, ho finito per scrivere una semplice piccola libreria per tenere conto di una serie di casi d'uso diversi. Poiché avevo bisogno di una soluzione che supportasse più iFrame generati dagli utenti su una pagina del portale, il browser supportato si ridimensionasse e potesse far fronte al caricamento JavaScript della pagina host dopo l'iFrame. Aggiungo anche il supporto per il dimensionamento in larghezza e una funzione di callback e consento l'override di body.margin, poiché probabilmente vorrai che questo sia impostato su zero.

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

Il codice iframe è solo un piccolo JavaScript autonomo, quindi è un buon ospite sulle pagine di altre persone.

Lo script viene quindi inizializzato sulla pagina host con le seguenti opzioni disponibili.

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

Un bel ragazzo. Sicuramente qualcosa che verrà utilizzato da molte persone! +1
Piotr Kula

1
cosa devo fare se non ho accesso al dominio remoto? Grazie
Bala Peterson

@BalaPeterson, se non puoi accedere al dominio remoto, non puoi farlo a causa delle limitazioni di sicurezza nel browser.
David Bradshaw

0

Invece di usare scroll = no sull'iframe, lo cambio in "auto". Quindi, ottengo le dimensioni della finestra effettiva

$(window).height();

e usalo come attributo di altezza dell'iframe.

Bene, il risultato è ...

Non avremo mai lo scorrimento "pagina", solo lo scorrimento "iframe". Quando navighi, non importa chi sia il rotolo, ma l'importante è che ce ne sia solo 1.

Bene, c'è il problema dell'utente che ridimensiona semplicemente la finestra mentre naviga. Per risolverlo, utilizzo:

setInterval(getDocHeight, 1);

Pensavi che quella soluzione causasse bug? Per me sta funzionando e sull'iFrame avevo un contenuto dinamico generato da php. Ho paura di futuri bug con quello ...


2
Ovviamente, lo scroll "iframe" avrà sempre le stesse dimensioni della pagina. Quindi, durante la navigazione, lo vedi come se fosse lo scorrimento della "pagina".
Elton Morais

0

Al giorno d'oggi ci sono solo 4 soluzioni che conosco:

Solo il terzo può risolvere molti problemi. Ad esempio , puoi creare iFrame reattivi ; chiudilo dall'interno o puoi comunicare con esso . Ma per farlo è necessario iFrame in Iframe e la soluzione alternativa "cookie di terze parti" (opzionale).

Ho creato un articolo al riguardo con un esempio: iFrame cross-domain basato su eventi


0

Hai esaminato gli attributi HTML5 di "adattamento agli oggetti"? Ridimensiona video / immagini all'iframe, invece di ridimensionare l'iframe (bello se prendi un'immagine di medie dimensioni che finisce per essere 5.000 px di larghezza). L'opzione "adatta" (altre sono "copertina" e "riempimento") utilizza un approccio di tipo letterbox per adattare la sorgente preservando le proporzioni. Per la visualizzazione da parte di HTML5-less là fuori, sembra che ci siano un sacco di polyfill disponibili. Questo è fantastico, ma un bug su Edge lo ha mantenuto incompatibile con New Nightmare di Microsoft per circa un anno, ora: https://github.com/anselmh/object-fit

MODIFICA: per aggirare i problemi interdominio, puoi sempre eseguire il lavoro in uno script di contenuto dell'estensione di Chrome, poiché pensa che faccia parte della pagina su cui stai attaccando il tuo iframe.


0

HTTPS un altro collegamento ottiene l'altezza dell'altezza automatica dell'iframe

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

Contenuto iframe https://-b.com :

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

Tavolo da lavoro:

xcom http> ycom https LAVORO

xcom https> ycom https LAVORO

xcom http> ycom http LAVORO

xcom https> ycom http WORK

Screenshot del lavoro di prova


-2

Stai cercando di trovare l'altezza della pagina contenuta nell'iframe? Ho funzionato un po 'di javascript che controlla l'altezza del contenuto dell'iframe, quindi imposta l'altezza dell'iframe all'altezza del contenuto.

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

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

Tuttavia, questo funziona solo se la pagina che stai mostrando nell'iframe si trova nello stesso dominio. In caso contrario, non è possibile accedere alle informazioni richieste. Quindi, l'errore di accesso negato.


Sì, l'ho già provato. Funziona benissimo .. sullo stesso dominio come hai detto tu .. Dimmi- come fa un browser a sapere quanto è il 100% quando calcola inizialmente l'altezza? perché non possiamo accedere anche a quei valori? Chrome memorizza questo in stili calcolati per ogni singola pagina nell'iframe anche x-domain ...
Piotr Kula

L'altezza viene calcolata in base ai contenuti e agli attributi che hanno. L'altezza di un elemento è incerta fino a quando non viene eseguito il rendering dei figli.
MarioRicalde

come posso ottenere i valori renderizzati allora? come fa il controllo in cromo?
Piotr Kula

-1 poiché questo non funziona cross-domain, che è quello che ha chiesto.
Sean Kinsey

Non puoi ottenere i valori. L'ispettore può perché ha autorizzazioni a livello di "estensione del browser" e non a "pagina web con un'origine diversa".
Quentin

-2

Per ridimensionare un iframe, ecco un semplice script:

questo va nella testa: (questo è stato scritto per uno script php, per html, cambia il 'in "e il \" in' ...

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

fine della testa

questo va nel corpo (ricorda, questo è stato scritto per uno script php, per html cambia tutto il 'in "e il \" in' ...)

<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: ci sono alcuni suggerimenti sopra. Dato che è impostato per lo scripting php, puoi fare molto con esso ... per saperne di più, fare di più ...

la chiave per questo è "sizeframe1" .... per più "resizer" sulla stessa pagina, copia lo stesso script ma cambia l'id in iframe e il nome nello script in testa, e viola! hai più resizer sulla stessa pagina ... funziona molto bene!

avere phun.


Non penso che tu stia affrontando la vera domanda posta.
Andrew Barber

Sì, questo è puro javascript per ridimensionare un iframe sullo stesso dominio. È molto più facile usare jQuery in qualsiasi modo. Questo non funzionerà in tutti i siti e non c'è niente di speciale qui che lo permetta. E non esiste uno scripting php ?!
Piotr Kula
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.