Javascript Girl
  1. Javascript Girl
  3. Comment «développer» un iFrame en fonction de la taille de son contenu?
Intereting Posts
Obtenir l'image relative src avec jQuery Comment les robots d'exploration Web traitent-ils le javascript Backbone js – réduire les appels au serveur Vim, bon moyen d'indent css et js inside html Quelles sont les «mises à jour optimistes» dans le développement de base Distinguez entre array et hash en javascript avec typeof () Combinaison de jQuery Sortable et Drop Event Obtenir des coordonnées de souris à l'aide de l'extension chrome Condenser un réseau sparse en Javascript? Sélection d'un élément dans iFrame jQuery Comment puis-je forcer Jquery à centrer un élément lorsqu'il est entraîné vers un autre conteneur? Webpack – extract-text-webpack-plugin Impossible de trouver le module Google mappe le marqueur mobile sur le clic JQuery et "Code Organisé" Comment distinguer par programmation une fonction de flèche à partir d'une fonction régulière?

Comment «développer» un iFrame en fonction de la taille de son contenu?

Je charge les iFrames de manière dynamique et certaines pages sont «plus grandes» que d'autres. J'aimerais que l'iFrame augmente en conséquence. C'est possible? Si c'est le cas, comment?

Oui, c'est possible par jquery. Code de page parent: 

<iframe id='ifrm' />

Script sur la page iframe: 

 function alertSize() { var myHeight = 0; if (typeof (parent.window.innerWidth) == 'number') { //Non-IE myHeight = parent.window.innerHeight; } else if (parent.document.documentElement && (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myHeight = parent.document.documentElement.clientHeight; } else if (parent.document.body && (parent.document.body.clientWidth || parent.document.body.clientHeight)) { //IE 4 compatible myHeight = parent.document.body.clientHeight; } //window.alert( 'Height = ' + myHeight ); return myHeight; } function AssignFrameHeight() { var theFrame = $("#ifrm", parent.document.body); var frameHeight1 = getIframeHeight('ifrm'); var frameHeight2 = $(document.body).height(); if ($(document.body)[0]) { if ($(document.body)[0].bottomMargin) frameHeight2 += Number($(document.body)[0].bottomMargin); if ($(document.body)[0].topMargin) frameHeight2 += Number($(document.body)[0].topMargin); } if (frameHeight1 > frameHeight2) { theFrame.height(frameHeight1 - 20); } else { if ($.browser.msie) theFrame.height(frameHeight2); else theFrame.height(frameHeight2 + 50); } } function getIframeHeight(iframeName) { //var iframeWin = window.frames[iframeName]; var iframeEl = parent.document.getElementById ? parent.document.getElementById(iframeName) : parent.document.all ? parent.document.all[iframeName] : null; if (iframeEl) { iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous //var docHt = getDocHeight(iframeWin.document); // need to add to height to be sure it will all show var h = alertSize(); //var new_h = (h - 148); //iframeEl.style.height = h + "px"; return h; //alertSize(); } }

Réaffecter la hauteur après le renvoi: 

 function pageLoad() { // MS AJAX - UpdatePanel AssignFrameHeight(); } $(document).ready(function() { // jQuery AssignFrameHeight(); });

Vous pourriez être capable de faire quelque chose comme 

 document.getElementById('your-iframe').height=new_height;

Mais si vous avez vraiment besoin d'avoir un iframe en fonction du contenu, je vous suggère d'essayer un autre élément html car un iframe pourrait ne pas être ce dont vous avez besoin.

Essayez d'utiliser la largeur: 100%; Hauteur: 100% et appliquez-les sur votre élément iframe