2011-01-03 19 views
0

Ich bearbeite einen Iframe mit einigen Inhalten, die in ihn injiziert werden, aber ich kann es nicht korrekt dimensionieren. Ich habe eine Vielzahl von Methoden ausprobiert, aber hier ist der neueste Code.Wie ändere ich die Größe eines Iframes mit dynamischem Inhalt?

Nachdem der Iframe mit einer html-basierten E-Mail-Nachricht gefüllt wurde, scheint die Scroll-Höhe nicht registriert zu sein.

<iframe scrolling="no" width="100%" onload="javascript:(LoadIFrame(this));" > 
HTML content goes here. Make sure it's long enough to need to scroll before testing. 
</iframe> 

<script type="text/javascript"> 
    function LoadIFrame(iframe) { 
     $("iframe").each(function() { 
      $(this).load(function() { 
       var doc = this.document; 
       if (this.contentDocument) { 
        doc = this.contentDocument; 
       } else if (this.contentWindow) { 
        doc = this.contentWindow.document; 
       } else if (this.document) { 
        doc = this.document; 
       } 
       this.height = (doc.body.scrollHeight + 50) + 'px'; 
       this.onload = ''; 
      }); 

      txt = $(this).text(); 
      var doc = this.document; 
      if (this.contentDocument) { 
       doc = this.contentDocument; 
      } else if (this.contentWindow) { 
       doc = this.contentWindow.document; 
      } else if (this.document) { 
       doc = this.document; 
      } 
      doc.open(); 
      doc.writeln(txt); 
      doc.close(); 
     }); 
    } 
</script> 

Antwort

0

nicht sicher, wo Sie ein Problem haben ...

sollten Sie nur in der Lage sein, schnell Größe es

*** Aktualisiert

theframe.height = document.frames ['sizeframe']. document.body.scrollHeight + 'px'; }

*** Sie führen wahrscheinlich in das Sicherheitsproblem: Set iframe to height of content for remote content

Für Inhalte aus der gleichen Domäne/local -es funktioniert ... (überprüft) .. Wenn Sie zu laden versuchen eine Remote-Seite arbeiten, es wird nicht ...

Diese

Works
<iframe id="sizedframe" style="width:100%" onload="sizeframe(this);" src="demo.htm"></iframe> 

Dies gilt nicht (es sei denn, seine von einer Seite auf Stackoverflow genannt wird)

<iframe id="sizedframe" style="width:100%" onload="sizeframe(this);" src="http://www.stackoverflow.com"></iframe> 
+0

Es wird die Größe 50, aber wenn Sie scrollHeight drucken, erhalten Sie 0 für den Wert. – Middletone

+0

sollten Sie viel mehr Tests und Analysen durchführen, bevor Sie Fragen beantworten. a -50 würde keine Höhe ergeben. Auch was hast du in deinen Rahmen gesteckt, um es zu testen? – Middletone

+0

Zum ersten Mal nur eine 1/4 Seite verwendet, um es zu überprüfen .. Downsizing hten gearbeitet ... Längere Seite nicht .. Nur aktualisiert und verifiziert es funktioniert ... meist müssen Sie nur für eine maximale Größe zu überprüfen ... – CarpeNoctumDC

0

Hinzufügen eines weiteren Antwort, weil seine nur einfacher ...

Kasse: http://thomas.bindzus.me/2007/12/24/adding-dynamic-contents-to-iframes/ i verhakt nur seine IFrame.js vom Ende des Pfostens des dynamischen Rahmen zu schaffen ...

SO versuchen, seinem Beispiel zu sehen, dass es es tun tut ..

tauschen dann die HTML-Code für diese ...

<html> 
    <head> 
     <title>Adding Dynamic Contents to IFrames</title> 

     <script type="text/javascript" src="IFrame.js"></script> 
     <script type="text/javascript"> 
     function onPageLoad() 
     { 
      var canvas = document.getElementById("canvas"); 
      var iframe = new IFrame(canvas); 

      var div = iframe.doc.createElement("div"); 
      div.innerHTML = "Hello IFrame!"; 
      iframe.doc.body.appendChild(div); 

      frameheight = iframe.document.body.scrollHeight; 
      iframe.width = '100%'; 
      iframe.height = frameheight + 'px'; 
     } 


     </script> 
    </head> 

    <body onload="onPageLoad();"> 
     <div id="canvas" style="border: solid 1px #000000; height: 500px; width: 500px;"></div> 
    </body> 
</html> 

** In der "Hallo Frame" ich nur, aber eine Menge Junk-Text, um es in der Größe zu ändern ...

Nur Untergang ist die maximale Höhe wird von Leinwand festgelegt ... aber das könnte durch Größenanpassung behoben werden Die 'Canvas'-Höhe ...

Verwandte Themen