jQuery überprüfen iFrame Höhe und anpassen

Question

Ich versuche, die Größe eines iFrame auf der Grundlage der Größe des Inhalts im iFrame zu ändern, kommt die Herausforderung von, wenn der Benutzer beginnt innerhalb des iFrame zu klicken, um den Status von zu überprüfen die iFrame ich ein Intervall verwenden wie die Inhaltsgröße zu überprüfen, so

var checkHeight = setInterval(function(){ 
checkHeight(); 
},1000); 

function checkHeight() { 
    var height = $('.foo').contents().height(); 
    console.log(height) 
    $('.foo').css({ 
    'height': height + 'px' 
    }); 
} 

was in Ordnung ist, wenn ein Benutzer auf eine Seite geht, wo der Inhalt 600px ist, wird die iFrame auf 600px gesetzt, aber wenn dann ein Benutzer geht auf einer Seite, wo die Höhe 200px ist, der iFrame abmeldet und 600px setzt, kann ich nicht herausfinden, warum jQuery die höchste Höhe Nummer speichert? Wenn Sie den Wert bei jedem Funktionsaufruf auf Null setzen, wird die Seite neu gestartet.

Answer 1

Ich verwende etwas wie folgt aus:

$(function(){ 
    $('#foo').load(function(){ 
     $('#foo').contents().find("body").on('click', function(event) { 
      runAfterTimeout('foo'); 
     }); 
    }); 
}); 

function runAfterTimeout(id) { 
    setTimeout(function(){ 
     autoResize(id); 
    },1000); 
}; 

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"; 
} 

Und auf dem iframe hinzufügen, um dieses: onload = "AUTORESIZE ('foo')"