dynamisch eingefügt CSS (Link) aufgebracht, nachdem Rahmen onload

Question

I eine iframe haben, dass ich die src der zur Laufzeit zu füllen:

$(iframe).attr("src", "<my html page uri>"); 

Gefolgt von:

$(iframe).load(function() { 
     //Copy style from parent 
     if (setStyles) { 
     setStyles = false; 
     var linkTags = window.parent.document.head.getElementsByTagName("link"); 
     for (var i = 0; i < linkTags.length; i++) { 
      if (linkTags[i].rel === "stylesheet") { 
      var node = linkTags[i].cloneNode(); 
      node.href = linkTags[i].href; 
      this.contentDocument.head.appendChild(node); 
      } 
     } 
     } 

     //add some elements dynamically 

     var windowHeight = iframe.contentWindow.document.body.scrollHeight; 
     $(iframe).height(windowHeight + 'px'); 
    }); 

vorletzten 2 Zeilen Code ist da, um den Rahmen anzupassen, um seinen Inhalt anzupassen, nachdem ich einige Elemente angehängt habe.

Das funktioniert, aber das Problem ist die CSS, die ich dynamisch hinzugefügt, ändert die Größe einiger Elemente, und das bedeutet, dass der Rahmen wieder die falsche Höhe hat.

Muss ich den dynamischen CSS-Zusatz und die Größenanpassung des Rahmens so verketten, dass das CSS auf die Elemente angewendet wird, bevor die Neugröße eintritt?

Wenn ja, wie? Danke

Answer 1

Sie müssen warten, bis die CSS-Datei geladen wird, bevor Sie die Eigenschaft scrollHeight lesen. Um es zu erreichen, können Sie vor dem Aufruf von appendChild einen Onload-Ereignishandler zum Link-Knoten hinzufügen.

$(node).load(function() { 
    var windowHeight = iframe.contentWindow.document.body.scrollHeight; 
    $(iframe).height(windowHeight + 'px'); 
}) ; 
// Before this: 
this.contentDocument.head.appendChild(node);