web-dev-qa-db-fra.com

Redimensionner le contenu du site Web externe en fonction de la largeur de l'iFrame

J'ai une page Web avec 2 iFrames. Les deux ont une largeur et une hauteur fixes. Je charge des sites Web externes à l'intérieur. Comment puis-je redimensionner la largeur de ces sites Web externes pour les adapter à iFrame (comme le font les navigateurs mobiles en modifiant la fenêtre d'affichage)?

javascripthtmlcssiframeweb
36
Tahin Rahman

Vous pouvez définir une largeur et une hauteur spécifiques pour votre iframe (par exemple, celles-ci pourraient être égales aux dimensions de votre fenêtre), puis lui appliquer une transformation d’échelle. La valeur d'échelle correspond au rapport entre la largeur de votre fenêtre et la dimension que vous souhaitez définir pour votre iframe.

Par exemple.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
70
Luca

Astuce pour 1 site web redimensionnant la hauteur. Mais vous pouvez changer pour 2 sites.

Voici mon code pour redimensionner un iframe avec un site Web externe. Vous devez insérer un code dans la page parent (avec le code iframe) et dans le site Web externe également. Par conséquent, cela ne fonctionnera pas si vous n'avez pas le droit de modifier le site Web externe.

  • page locale (iframe): il suffit d'insérer un extrait de code
  • page distante (externe): vous avez besoin d'un "body onload" et d'un "div" contenant tout le contenu. Et le corps doit être appelé "marge: 0"

Local:

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>

<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
  if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>

Vous avez besoin de ce préfixe "frm" pour éviter des problèmes avec d’autres codes intégrés tels que les plugins Twitter ou Facebook. Si vous avez une page simple, vous pouvez supprimer les préfixes "if" et "frm" sur les deux pages (script et onload).

Éloigné:

Vous avez besoin de jQuery pour atteindre une "vraie" hauteur de page. Je ne peux pas comprendre comment utiliser du JavaScript pur, car vous aurez du mal à redimensionner la hauteur avec body.scrollHeight ou les commandes associées. Pour une raison quelconque, il retournera toujours la plus grande hauteur (pré-redimensionnée).

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>

Ainsi, la page parent (iframe) a une hauteur par défaut de 1 px. Le script insère une "attente de message/événement" de l'iframe. Lorsqu'un message (message post) est reçu et que les 3 premiers caractères sont "frm" (pour éviter le problème mentionné), le numéro sera obtenu à partir de la 4ème position et définira la hauteur de l'iframe (style), y compris l'unité "px".

Le site externe (chargé dans l'iframe) "enverra un message" au parent (ouvreur) avec le "frm" et la hauteur de la div principale (dans ce cas, l'id "maître"). Le "*" dans postmessage signifie "n'importe quelle source".

J'espère que cela t'aides. Désolé pour mon anglais.

2
Arvy