Existe-t-il un redimensionnement automatique de hauteur iframe interdomaine qui fonctionne?

Vous avez trois alternatives:

1. Utilisez iFrame-resizer

Ceci est une bibliothèque simple pour garder les iFrames à leur contenu. Il utilise les API PostMessage et MutationObserver, avec des solutions de secours pour IE8-10. Il a également des options pour que la page de contenu demande le format iFrame d’une certaine taille et peut également fermer l’iFrame lorsque vous en avez fini.

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

2. Utilisez Easy XDM (combo PostMessage + Flash)

Easy XDM utilise un ensemble de trucs pour permettre la communication entre domaines entre différentes fenêtres dans un certain nombre de navigateurs, et il existe des exemples d’utilisation du redimensionnement d’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 fonctionne en utilisant PostMessage sur les navigateurs modernes et une solution basée sur Flash comme solution de rechange pour les navigateurs plus anciens.

Voir aussi cette discussion sur Stackoverflow (il y en a d’autres, c’est une question fréquemment posée). De plus, Facebook semble utiliser une approche similaire .

3. Communiquer via un serveur

Une autre option consisterait à envoyer la hauteur iframe à votre serveur, puis à interroger ce serveur depuis la page Web parent avec JSONP (ou à utiliser un long interrogation si possible).

J’ai trouvé la solution pour définir dynamicment la hauteur de l’iframe en fonction de son contenu. Cela fonctionne pour le contenu interdomaine. Il y a quelques étapes à suivre pour y parvenir.

1. Supposons que vous ayez ajouté iframe dans la page Web “abc.com/page”

2. Ensuite, vous devez lier l’événement Windows “message” sous la page 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", "*"); } 

Ce que j’ai fait a été de comparer l’iframe scrollWidth jusqu’à ce qu’il change de taille alors que je définissais progressivement la hauteur d’IFrame. Et ça a bien marché pour moi. Vous pouvez ajuster l’incrément à ce que vous souhaitez.

Voici ma solution simple à cette page. http://lab.ohshiftlabs.com/iframesize/

Voici comment ça marche;

Fondamentalement, si vous pouvez modifier une page sur un autre domaine, vous pouvez placer une autre page iframe appartenant à votre serveur, ce qui économise de la hauteur aux cookies. Avec un intervalle de lecture des cookies lorsqu’il est mis à jour, mettez à jour la hauteur de l’iframe. C’est tout.

Télécharger; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip.

J’ai trouvé une autre solution côté serveur pour les développeurs Web utilisant PHP pour obtenir la taille d’un iframe.

Tout d’abord, utiliser le script serveur PHP pour un appel externe via une fonction interne: (comme un file_get_contents avec mais curl et 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       
     

Vous devez afficher sous le div ( iframe_reserve ) le iframe_reserve HTML généré par l’appel de fonction en utilisant un simple echo curl_get_file_contents("location url iframe","activation proxy")

Après avoir fait ceci une fonction d’événement de corps onload avec javascript prendre la hauteur de la page iframe juste avec un contrôle simple du contenu div ( iframe_reserve )

J’ai donc utilisé divHeight = document.getElementById("iframe_reserve").clientHeight; pour obtenir la hauteur de la page external, nous allons appeler après avoir masqué le conteneur div ( iframe_reserve ). Après cela, nous chargeons l’iframe avec sa bonne hauteur, c’est tout.

J’ai un script qui tombe dans l’iframe avec son contenu. Il s’assure également que iFrameResizer existe (il l’injecte en tant que script) et effectue ensuite le redimensionnement.

Je laisserai tomber un exemple simplifié ci-dessous.

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

Ensuite, le contenu iframe peut être injecté n’importe où dans une autre page / site en utilisant le script comme suit:

Le contenu de l’iframe sera injecté ci-dessous, où que vous placiez la balise de script.

J’espère que cela est utile à quelqu’un. 👍