web-dev-qa-db-fra.com

Assurez-vous que iframe ajuste automatiquement la hauteur en fonction du contenu sans utiliser la barre de défilement?

Par exemple:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

Je veux qu'il puisse ajuster sa hauteur en fonction du contenu qu'il contient, sans utiliser de défilement.

htmliframeheightscrollbar
461
akashbc

Ajoutez ceci à votre section <head>:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Et changez votre iframe en ceci:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Tel que trouvé sur discussion de site .

608
hjpotter92

Vous pouvez utiliser cette bibliothèque, qui redimensionne initialement correctement votre iframe et la maintient à la bonne taille en détectant chaque fois que la taille du contenu de l'iframe change (soit en vérifiant régulièrement dans un fichier setInterval ou via MutationObserver ) et le redimensionner.

https://github.com/davidjbradshaw/iframe-resizer

Ceci fonctionne avec les mêmes iframes cross et domain.

83
user2684310

Voici une version compacte:

<iframe src="hello.html"
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
45
Chong Lip Phang

La suggestion de hjpotter92 ne fonctionne pas en safari! J'ai apporté une petite modification au script afin qu'il fonctionne également dans Safari.

La seule modification apportée consiste à réinitialiser la hauteur à 0 à chaque chargement afin de permettre à certains navigateurs de diminuer la hauteur.

Ajoutez ceci à la balise <head>:

<script type="text/javascript">
  function resizeIframe(obj){
     obj.style.height = 0;
     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Et ajoutez l'attribut onload suivant à votre iframe, comme suit

<iframe onload='resizeIframe(this)'></iframe>
37
Allan P

La réponse hjpotter92 fonctionne assez bien dans certains cas, mais j'ai constaté que le contenu de l'iframe était souvent pris au plus crant avec Firefox et IE, alors que tout fonctionnait bien dans Chrome.

Ce qui suit fonctionne bien pour moi et corrige le problème de découpage. Le code a été trouvé à l'adresse http://www.dyn-web.com/tutorials/iframes/height/ . J'ai apporté une légère modification pour supprimer l'attribut onload du code HTML. Placez le code suivant après le <iframe> HTML et avant la balise de fermeture </body>:

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

Votre code HTML iframe:

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

Notez que si vous préférez inclure le Javascript dans le <head> du document, vous pouvez revenir à l’utilisation d’un attribut inline onload dans le iframe HTML, comme dans le dyn-web page Web.

13
Jimadine

Évitez le JavaScript intégré; vous pouvez utiliser une classe:

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

Et référencez-le avec jQuery:

$('.iframe-full-height').on('load', function(){
    this.style.height=this.contentDocument.body.scrollHeight +'px';
});
12
rybo111

la méthode . contents () de jQuery nous permet de rechercher dans les enfants immédiats de l'élément dans l'arborescence DOM.

jQuery:

$('iframe').height( $('iframe').contents().outerHeight() );

Rappelez-vous que le corps de la page à l'intérieur de l'iframe doit avoir sa hauteur

CSS:

body {
  height: auto;
  overflow: auto
}
4
Nathalia Xavier

Cela fonctionne pour moi (principalement).

Mettez ceci au bas de votre page.

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script>

La première moitié est de ???, et fonctionne quand il y a du HTML dans l'iframe. La seconde moitié définit l'iframe sur la hauteur de la page (pas la hauteur du contenu), lorsque la classe iframes est iframe_fullHeight. Vous pouvez l'utiliser si le contenu est un PDF ou autre, mais vous devez définir la classe. Aussi, ne peut être utilisé que lorsque la hauteur maximale est appropriée.

Remarque: pour une raison quelconque, lorsqu'il recalcule après le redimensionnement de la fenêtre, la hauteur est incorrecte.

2
ctrl-alt-delor

Essayez ceci pour IE11

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
2
Lucky

Cela fonctionne pour moi (également avec plusieurs iframes sur une page):

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
2
user2992220
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
1
Айдън Бейтулов
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

ajoutez ceci à votre iframe: onload = "autoResize ('youriframeid')"

1
Simon

Je l'ai fait avec AngularJS. Angular n'a pas de charge de base, mais un module tiers a été créé. installer avec bower ci-dessous, ou le trouver ici: https://github.com/andrefarzat/ng-load

Récupère la directive ngLoad: bower install ng-load --save

Configurez votre iframe:

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

Fonction resizeIframe du contrôleur:

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
0
Charles Naccio

J'ai eu des problèmes dans le passé avec iframe.onload pour des iframes créés dynamiquement. Je suis donc allé avec cette approche pour définir la taille de l'iframe:

iFrame Voir

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

Vue principale

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

(cela ne fonctionnera que si les deux vues sont dans le même domaine)

0
Owen