hauteur IFrame document retourne la hauteur iFrame pas la vraie hauteur

Je javascript à l'intérieur d'un iframe qui envoie la hauteur du corps iframe à la page parent en utilisant la technique de trois châssis à Resizing an iframe based on content hauteur IFrame document retourne la hauteur iFrame pas la vraie hauteur

La hauteur du corps iframes semble toujours sortir à 900, la hauteur de la fenêtre de l'iframe. Ceci est cohérent entre les navigateurs.

Le iframe:

<iframe id="printiq" src="http://myurl.com" height="900px" width="980px">Your browser does not support iframes.</iframe>

Le script dans la iframe:

$(window).load(function() { 
    var height = document.body.scrollHeight + 60; 
    alert('Height: ' + height); //Always returns 900, the height of the iframe 
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper'; 
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>'; 
    $('body').append(iframe_html);

});

La chose étrange est quand je visite les DOM avec Firebug aucune des variables de hauteur (scrollHeight, offsetHeight etc) sont fixés à 900.

Source

2010-07-06 Keyo

Le problème a été un div sur la page iframe, était en expansion à la hauteur la fenêtre d'affichage. Je l'ai réparé en changeant le css.

Voici le code que j'ai fini avec.

Fenêtre parent.

function resizeIframe(height) { 
    height = parseInt(height) + 60; 
    $('iframe#printiq').attr('height', height); 
}

Le script pour le site externe iframed.

$(window).load(function() { 
    var height = $('#container').height() + $('#header').height(); 
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper'; 
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>'; 
    $('body').append(iframe_html);

});

L'aide iframe, qui est intégrée dans l'iframe. Un petit-enfant de la fenêtre du navigateur si vous le souhaitez.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <!-- 
    This page is on the same domain as the parent, so can 
    communicate with it to order the iframe window resizing 
    to fit the content 
    --> 
    <body onload="parentIframeResize()"> 
     <style type="text/css"> 
      body{ 
       border:none; 
       display:none; 
      } 
     </style> 
     <script> 
      // Tell the parent iframe what height the iframe needs to be 
      function parentIframeResize() 
      { 
       var height = getParam('height'); 
       // This works as our parent's parent is on our domain.. 
       parent.parent.resizeIframe(height); 
      } 

      function getUrlVars() 
      { 
       var vars = [], hash; 
       var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
       for(var i = 0; i < hashes.length; i++) 
       { 
        hash = hashes[i].split('='); 
        vars.push(hash[0]); 
        vars[hash[0]] = hash[1]; 
       } 
       return vars; 
      } 

      // Helper function, parse param from request string 
      function getParam(name) 
      { 

       var results = getUrlVars(); 
       if(results == null) 
        return ""; 
       else 
        return results['height']; 
      } 
     </script> 
    </body> 
</html>

Source

2010-07-07 01:35:46 Keyo

hauteur IFrame document retourne la hauteur iFrame pas la vraie hauteur

Répondre

Questions connexes