Esiste un auto-resizer di altezza iframe per più domini che funzioni?

Ho provato alcune soluzioni ma non ho avuto successo. Mi chiedo se ci sia una soluzione là fuori preferibilmente con un tutorial facile da seguire.

Hai tre alternative:

1. Usa iFrame-resizer

Questa è una semplice libreria per mantenere iFrame dimensionati per il loro contenuto. Utilizza le API PostMessage e MutationObserver, con fallback per IE8-10. Ha anche opzioni per la pagina di contenuto per richiedere che l’iFrame contenente sia una certa dimensione e può anche chiudere l’iFrame quando hai finito con esso.

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

2. Usa Easy XDM (PostMessage + Flash combo)

Easy XDM utilizza una raccolta di trucchi per abilitare la comunicazione tra domini tra windows diverse in un numero di browser, e ci sono esempi per utilizzarlo per il ridimensionamento di iframe:

http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/

http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/

Easy XDM funziona utilizzando PostMessage sui browser moderni e una soluzione basata su Flash come fallback per i browser più vecchi.

Vedi anche questo thread su Stackoverflow (ce ne sono anche altri, questa è una domanda comune). Inoltre, Facebook sembrerebbe utilizzare un approccio simile .

3. Comunicare tramite un server

Un’altra opzione sarebbe quella di inviare l’altezza iframe al tuo server e quindi eseguire il polling da quel server dalla pagina web padre con JSONP (o usare un lungo sondaggio se ansible).

Ho ottenuto la soluzione per impostare l’altezza dell’iframe in modo dinamico in base al suo contenuto. Funziona per il contenuto interdominio. Ci sono alcuni passi da seguire per raggiungere questo objective.

  1. Supponiamo di aver aggiunto iframe nella pagina Web “abc.com/page”

  2. Quindi è necessario associare l’evento “messaggio” di Windows nella pagina Web “abc.com/page”

 window.addEventListener('message', function (event) { //Here We have to check content of the message event for safety purpose //event data contains message sent from page added in iframe as shown in step 3 if (event.data.hasOwnProperty("FrameHeight")) { //Set height of the Iframe $("#IframeId").css("height", event.data.FrameHeight); } }); On iframe load you have to send message to iframe window content with "FrameHeight" message function setIframeHeight(ifrm) { var height = ifrm.contentWindow.postMessage("FrameHeight", "*"); } 

Quello che ho fatto è stato confrontare l’iframe scrollWidth fino a quando non ha cambiato dimensione mentre ho impostato in modo incrementale l’altezza IFrame. E ha funzionato bene per me. È ansible regolare l’incremento su qualsiasi cosa si desideri.

    

Ecco la mia soluzione semplice a questa pagina. http://lab.ohshiftlabs.com/iframesize/

Ecco come funziona;

inserisci la descrizione dell'immagine qui

Fondamentalmente se sei in grado di modificare la pagina su un altro dominio, puoi posizionare un’altra pagina iframe che appartiene al tuo server e che salva l’altezza dei cookie. Con un intervallo leggi i cookie quando viene aggiornato, aggiorna l’altezza dell’iframe. Questo è tutto.

Scaricare; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip

Ho trovato un’altra soluzione lato server per web dev utilizzando PHP per ottenere le dimensioni di un iframe.

Il primo è usare lo script server PHP per una chiamata esterna tramite la funzione interna: (come un file_get_contents con ma curl e dom).

 function curl_get_file_contents($url,$proxyActivation=false) { global $proxy; $c = curl_init(); curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7"); curl_setopt($c, CURLOPT_REFERER, $url); curl_setopt($c, CURLOPT_URL, $url); curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1); if($proxyActivation) { curl_setopt($c, CURLOPT_PROXY, $proxy); } $contents = curl_exec($c); curl_close($c); $dom = new DOMDocument(); $dom->preserveWhiteSpace = false; @$dom->loadHTML($contents); $form = $dom->getElementsByTagName("body")->item(0); if ($contents) //si on a du contenu return $dom->saveHTML(); else return FALSE; } $url = "http://www.google.com"; //Exernal url test to iframe       

Devi mostrare sotto il div ( iframe_reserve ) l’html generato dalla chiamata alla funzione usando un semplice echo curl_get_file_contents("location url iframe","activation proxy")

Dopo aver eseguito questa operazione, una funzione evento body si carica con javascript, prende l’altezza della pagina iframe con un semplice controllo del contenuto div ( iframe_reserve )

Quindi ho usato divHeight = document.getElementById("iframe_reserve").clientHeight; per ottenere l’altezza della pagina esterna chiameremo dopo aver mascherato il contenitore div ( iframe_reserve ). Dopo questo carichiamo l’iframe con la sua buona altezza, tutto qui.

Ho uno script che cade nell’iframe con il suo contenuto. Inoltre si assicura che iFrameResizer esista (lo inietta come script) e quindi esegue il ridimensionamento.

Inserirò un esempio semplificato di seguito.

 // /js/embed-iframe-content.js (function(){ // Note the id, we need to set this correctly on the script tag responsible for // requesting this file. var me = document.getElementById('my-iframe-content-loader-script-tag'); function loadIFrame() { var ifrm = document.createElement('iframe'); ifrm.id = 'my-iframe-identifier'; ifrm.setAttribute('src', 'http://www.google.com'); ifrm.style.width = '100%'; ifrm.style.border = 0; // we initially hide the iframe to avoid seeing the iframe resizing ifrm.style.opacity = 0; ifrm.onload = function () { // this will resize our iframe iFrameResize({ log: true }, '#my-iframe-identifier'); // make our iframe visible ifrm.style.opacity = 1; }; me.insertAdjacentElement('afterend', ifrm); } if (!window.iFrameResize) { // We first need to ensure we inject the js required to resize our iframe. var resizerScriptTag = document.createElement('script'); resizerScriptTag.type = 'text/javascript'; // IMPORTANT: insert the script tag before attaching the onload and setting the src. me.insertAdjacentElement('afterend', ifrm); // IMPORTANT: attach the onload before setting the src. resizerScriptTag.onload = loadIFrame; // This a CDN resource to get the iFrameResizer code. // NOTE: You must have the below "coupled" script hosted by the content that // is loaded within the iframe: // https://unpkg.com/[email protected]/js/iframeResizer.contentWindow.min.js resizerScriptTag.src = 'https://unpkg.com/[email protected]/js/iframeResizer.min.js'; } else { // Cool, the iFrameResizer exists so we can just load our iframe. loadIFrame(); } }()) 

Quindi il contenuto dell’iframe può essere iniettato ovunque all’interno di un’altra pagina / sito utilizzando lo script in questo modo:

  

Il contenuto dell’iframe verrà inserito sotto ovunque posizioni il tag dello script.

Spero che questo sia utile a qualcuno. 👍