web-dev-qa-db-fra.com

Redimensionner iframe au contenu avec Jquery

J'essaie de redimensionner un iframe de manière dynamique pour l'adapter à son contenu. Pour ce faire, j'ai un morceau de code:

$("#IframeId").height($("#IframeId").contents().find("html").height());​

Ça ne marche pas. Est-ce à cause d'un problème interdomaine? Comment puis-je le faire rentrer? S'il vous plaît jeter un oeil à Fiddle: JsFiddle

ps J'ai défini le code HTML et le corps du lien height:100%;

javascriptjqueryiframe
10
Youss

Il vous suffit d’appliquer votre code sur l’événement iframe load pour que la hauteur soit déjà connue à ce moment-là, le code suit:

$("#IframeId").load(function() {
    $(this).height( $(this).contents().find("body").height() );
});

Voir travail démo . Cette démo fonctionne sur jsfiddle car j'ai défini l'URL iframe sur une URL du même domaine que le résultat jsfiddle iframe, c'est-à-dire le domaine fiddle.jshell.net.

METTRE À JOUR:
@ Youss: Il semble que votre page n’ait pas la bonne taille pour le corps, essayez donc d’utiliser plutôt la hauteur des éléments principaux, comme ceci:

$(document).ready(function() {
    $("#IframeId").load(function() {
            var h = $(this).contents().find("ul.jq-text").height();
            h += $(this).contents().find("#form1").height();
            $(this).height( h );
        });
});
14
Nelson

Vous ne savez pas pourquoi la solution de @ Nelson ne fonctionnait pas dans Firefox 26 (Ubuntu), mais la solution Javascript-jQuery suivante semble fonctionner dans Chromium et Firefox.

/**
 * Called to resize a given iframe.
 *
 * @param frame The iframe to resize.
 */
function resize( frame ) {
  var b = frame.contentWindow.document.body || frame.contentDocument.body,
      cHeight = $(b).height();

  if( frame.oHeight !== cHeight ) {
    $(frame).height( 0 );
    frame.style.height = 0;

    $(frame).height( cHeight );
    frame.style.height = cHeight + "px";

    frame.oHeight = cHeight;
  }

  // Call again to check whether the content height has changed.
  setTimeout( function() { resize( frame ); }, 250 );
}

/**
 * Resizes all the iframe objects on the current page. This is called when
 * the page is loaded. For some reason using jQuery to trigger on loading
 * the iframe does not work in Firefox 26.
 */
window.onload = function() {
  var frame,
      frames = document.getElementsByTagName( 'iframe' ),
      i = frames.length - 1;

  while( i >= 0 ) {
    frame = frames[i];
    frame.onload = resize( frame );

    i -= 1;
  }
};

Cela redimensionne continuellement tous les iframes d'une page donnée.

Testé avec jQuery 1.10.2 .

Utiliser $('iframe').on( 'load', ... ne fonctionnerait que par intermittence. Notez que la taille doit initialement être définie sur 0 pixels en hauteur si elle doit être inférieure à la hauteur par défaut iframe dans certains navigateurs.

4
Dave Jarvis

Ce que vous pouvez faire est le suivant:

  • Dans l'iFrame, utilisez document.parent.setHeight (myheight) pour définir la hauteur du parent dans l'iFrame. Ce qui est permis puisqu'il s'agit d'un contrôle enfant. Appelle une fonction du parent.

  • Dans le parent, vous créez une fonction setHeight (iframeheight) qui redimensionne l’iFrame.

Regarde aussi:
Comment implémenter l'accès URL multi-domaines à partir d'un iframe à l'aide de Javascript?

3
Niels

Il suffit de le faire sur la balise HTML, fonctionne parfaitement

$("#iframe").load(function() {
    $(this).height( $(this).contents().find("html").height() );
});
2
Roy Shoa

Ajustez la hauteur d'un iframe, en charge et redimensionnez en fonction de la hauteur de son corps.

var iFrameID = document.getElementById('iframe2');
var iframeWin = iFrameID.contentWindow;

var eventList = ["load", "resize"];
for(event of eventList) {
    iframeWin.addEventListener(event, function(){ 
        if(iFrameID) {
            var h = iframeWin.document.body.offsetHeight  + "px";
            if(iFrameID.height == h) {
                return false;
            }

            iFrameID.height = "";
            iFrameID.height = iframeWin.document.body.offsetHeight  + "px";

        }   
    })  
}
0
GarryOne

Comme réponse à la question, utilisez un jQuery déjà obsolète (load est obsolète et remplacé par .on ('load', function () {}). Le code le plus récent de la réponse à la question est le suivant.

Notez que j’utilise scrollHeight et scrollWidth, qui, je pense, se chargeront beaucoup mieux que d’utiliser Height et Width comme pour la réponse fournie. Cela conviendra parfaitement, sans défilement.

$("#dreport_frame").on('load',function(){

  var h = $('#dreport_frame').contents().find("body").prop('scrollHeight');
  var w = $('#dreport_frame').contents().find("body").prop('scrollWidth');

  $('#dreport_frame').height(h);
  $('#dreport_frame').width(w);
})
0
maximran