Comment est-ce que je peux redimensionner un iframe modal quand une nouvelle page charge dedans?

Question

J'ai plusieurs pages liées que je veux afficher dans un iframe modal. Les pages n'ont pas la même taille et je veux être en mesure de redimensionner l'iframe lorsque chaque nouvelle page est chargée. J'ai regardé plusieurs plugins jquery pour créer l'iframe, mais je n'arrive pas à comprendre comment redimensionner l'un d'entre eux. J'expérimente actuellement avec prettyPhoto et nyroModal, mais je suis ouvert aux suggestions. J'ai juste besoin de le faire fonctionner. Aussi, je ne suis pas très bon avec JavaScript, mais j'essaie d'apprendre. REMARQUE: toutes mes pages sont sur mon serveur Web, donc il n'y a pas de problème avec le domaine croisé.

Merci pour toutes les réponses rapides. Je me dirige vers le lit mais j'ai hâte d'essayer vos suggestions quand je me réveillerai.

Answer 1

Essayez de mettre cela dans le iframe:

document.onload = function() { 
    var i = parent.document.getElementById('myIframe'); 
    i.style.width = document.body.offsetWidth+"px"; 
    i.style.height = document.body.offsetHeight+"px"; 
} 

Answer 2

Lors du chargement de pages pour vous iframe probablement rencontrer des problèmes inter-domaines. L'accès à la page à l'intérieur de l'iframe à partir du JS du parent est bloqué.

Si vous voulez le faire facilement - garder une trace de ce qui est chargé dans l'iframe dans votre code et le redimensionner manuellement aux dimensions codées en dur.

Créer un tableau de dimensions que vous souhaitez utiliser pour chaque page et utiliser cette fonction:

function() { 
    var i = document.getElementById('myIframe'); 
    var sr=i.src; 
    i.style.width = myDimensionsArray[sr][w]+"px"; 
    i.style.height = myDimensionsArray[sr][h]+"px"; 
} 

Answer 3

Vous pouvez utiliser postMessage pour cela. Dans votre iframe écrire ceci:

document.body.onload=function(){ 
    parent.postMessage("resize_me", "*"); 
}

Dans votre page principale:

window.addEventListener("message", function(e){ 
    if(e.data=="resize_me") { 
    //resize the iframe 
    } 
}

Answer 4

Il y a 2 cas ici:

1. iframe est chargé après le modal est ouvert

2. iframe est chargé avant que le modal est ouvert

   function resizeIframe(obj){ obj.style.height = 0; obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } $(".modal").on('shown.bs.modal', function() { resizeIframe(document.getElementById(IFRAME_ID)); }); window.onload=function(){ document.getElementById('IFRAME_ID').addEventListener('load', function(){ resizeIframe(document.getElementById(IFRAME_ID)); }); }

En cas de

1. Lorsque le iframe est chargé, le iframe se redimensionne
2. lorsque iframe est chargé, comme le modal est invisible, il ne sera pas redimensionne donc il a besoin de redimensionner à nouveau le modèle est affiché.