iFrame HÖHE dynamisch anpassen lassen ( Forum Integration )

rammler

Hi, ich brauche ein Forum für ne WP Seite.
Die Wahl fiel auf phpbb3. Die Integrationklappt auch wunderbar, nur der IE 7 und 8 will mein JS nicht anwenden.

Hier die Seite um die es geht:
http://www.frankenhorse.de/?page_id=3841

Mirt diesem Script erreiche ich eine dynamische iFame Höhenanpassung im FF / Opera und Safari

Code

<script type="text/javascript">
	  var framefenster = document.getElementsByTagName("iFrame");
	  var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
	  function autoresize_frames() {
	    for (var i = 0; i < framefenster.length; ++i) {
	        if(framefenster[i].contentWindow.document.body){
	          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
	          if(document.all && !window.opera) {
	            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
	          }
	          framefenster[i].style.height = framefenster_size + 'px';
	        }
	    }
	  }
	</script>

Alles anzeigen

Das komische daran ist, das das Script außerhalb meiner WP Installation im IE funktioniert.

Das Script ist von hier:
http://www.professorweb.de/javascript-aja…npassen-v2.html

So, wisst Ihr warum der IE nicht mag?
ODER habt Ihr noch ein anderes Script parat was ich testen kann?

ODER wie löst Ihr das Problem mit dynamischer iFrame Höhe im WP Content?
Vielen, vielen Dank

Bernd

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

rammler

Lösung

Hi, hab grad nen Tipp aus nem anderem Forum bekommen.
Mit dem hier: http://blogs.system-worx.de/kejr/2010/06/0…hohenanpassung/ klappts wunderbar!

CHA

mOiNMoIn.,.,.,

dieser Beitrag ist bald 3 Jahre alt, aber ich würd ihn gern wieder beleben.
Das Script von der Seite: http://www.professorweb.de/javascript-aja…npassen-v2.html ist klasse, nur der IE 10 erweitert den Inhalt des iFrames sekündlich um 1 Zeile nach unten. In allen amtlichen Browsern funktioniert das Script perfekt.

Hier nochmal das Script:

Code

var framefenster = document.getElementsByTagName("iFrame");
  var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
  function autoresize_frames() {
    for (var i = 0; i < framefenster.length; ++i) {
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
          if(document.all && !window.opera) {
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }
          framefenster[i].style.height = framefenster_size + 'px';
        }
    }
  }

Alles anzeigen

Mich würde interessieren wie sich das Script bei euch im "IE 10" verhält.
Vll. hat ja jemand ne Idee, warum der IE den Boden nach unten aufreisst.

Beste Grüße

CHA

Melewo

Ich kann da keine Zeile mit window.clearInterval entdecken, um window.setInterval zu beenden, wo ist die?

http://de.selfhtml.org/javascript/obj…tm#set_interval

CHA

mOiNMoIn Melewo,

das ist natürlich die Idee, aber ich krieg des nicht funktionierend richtig eingebaut :(

Haste da vll. n Tip?

Beste Grüße

CHA

Melewo

Zitat von CHA

Haste da vll. n Tip?

Ja, Tipps hätte ich auch, zum Beispiel:

Zitat von CHA

if(document.all && !window.opera) {

Wenn Du für IE 4 bis 6 entwickelst, dann ist zum Beispiel document.all erste Wahl. Wenn Du für neuere Browser entwickeln möchtest, verwende stattdessen lieber die DOM-Methoden. Mit anderen Worten, der Code ist nicht mehr zeitgemäß und nach meiner Meinung unvollständig.

Melewo

Habe mal ein kleines Beispiel fertig gemacht, was eigentlich in allen Browsern funktionieren sollte, jedoch nur wenn Du auf die Seite im Frame und auf die Seite mit dem Frame Zugriff hast.

Die Seite im Frame:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Seite im Frame</title>
</head>
<body>
  <div id="content" style="height:480px; text-align:center; border:1px solid #000">
    <h1>Seite im Frame</h1>
    <p>Text</p> 
  </div>
<script type="text/javascript"> 
"use strict";
window.onload = function() {


    var gebeab = parent.document.getElementById("Frame01");
    var dhoehe = document.getElementById("content").offsetHeight;
    
    if (gebeab != null) {
        var zugabe = dhoehe +20;
        gebeab.style.height = zugabe +"px";
    }
}
</script>
</body>
</html>

Alles anzeigen

Die Seite mit dem Frame:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Seite mit Frame</title>
</head>
<body style="text-align:center">
  <div>
    <h1>Seite mit Frame</h1>
    <p><iframe id="Frame01" src="seite-im-frame.html" name="Frame01" 
    style="width:800px; border:1px solid #0f0; overflow:hidden; margin:0px"></iframe></p> 
  </div>
</body>
</html>

Alles anzeigen

Domainübergreifend ginge es auch, wobei sich dann aber postMessage anbieten würde und die Angelegenheit sich ein wenig komplizierter gestaltet, um keine Sicherheitslücken aufzureißen. Dazu würde ich aber höchstens mal ein Tutorial machen, wenn etwas mehr Zeit vorhanden sein sollte. Nur so als Ansatz:

Code

window.parent.postMessage(hoehe, '*');

CHA

mOiNMoIn,

danke dir Melewo...
In meinem Projekt hat deine Version nicht funktioniert.
Woran das jetzt im einzelnen gelegen haben kann.,.,., nicht klar schlüssig.

Der zuvor oben gepostete JS-Code funktioniert insofern ja super in den aktuellen
Browser-Versionen von: FF, GC, OPERA. Nur der IE braucht eine "window.clearInterval" Anweisung.

Jetzt hab ich paar Stunden hin und her probiert und bislang noch kein Erfolg verzeichnen können.

Hier mein jetziger Arbeitscode:

Code

var framefenster = document.getElementsByTagName("iframe");
   var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
   function autoresize_frames() {
     for (var i = 0; i < framefenster.length; ++i) {
         if(framefenster[i].contentWindow.document.body){
           var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
           if(document.all && !window.opera) {
             framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
           }
           framefenster[i].style.height = framefenster_size + 'px';           
         }         
     }
     
           i = i + 0;
           if (i >= 1)
           window.clearInterval(auto_resize_timer);
}

Alles anzeigen

"window.setInterval" wird jetzt beendet, aber letztendich auch das gesamte Script.
Da wird einem mal wieder die "IE" Meganervsuppe um die Ohren gefegt.
Der "IE" bleibt für mich immernoch, ein Alter Opa auf ner neuen Harley. :lol:

:???:

Beste Grüße

CHA

Melewo

Zitat von CHA

Woran das jetzt im einzelnen gelegen haben kann.,.,., nicht klar schlüssig.

Vermutlich an der Umsetzung, denn ich habe die auch mit FF, Chrome und IE getestet.
Und der andere Code, warum beendest Du bei >= 1, gibt es dafür einen Grund?

CHA

Zitat von Melewo

Vermutlich an der Umsetzung, denn ich habe die auch mit FF, Chrome und IE getestet.
Und der andere Code, warum beendest Du bei >= 1, gibt es dafür einen Grund?

... nicht wirklich, habe die 1 stehen lassen da ich derzeit nicht weiss wie ich den Code einmal aufrufe und er dann gestoppt wird.
Ich will ja die Endlosschleife im IE verhindern.

Viele Grüße

CHA

Melewo

Ich weiß zwar nicht was Du Dir da zusammenschreibst, doch nun habe ich auch noch diesen Code ausprobiert, ohne den geringsten Hinweis auf einen Fehler zu erhalten.

Da ich hier kein Script korrigieren werde, welches noch das all-Objekt verwendet, habe ich mal die entsprechenden Zeilen gelöscht.

Dann, wozu wird da die globale Variable var auto_resize_timer definiert, wenn sie anschließend im weiteren Verlauf weder benutzt noch verwendet wird?
Wozu muss die Funktion autoresize_frames mit window.setInterval aufgerufen werden, wenn die nur die Höhe ermitteln soll und auch anders aufzurufen geht?

Der ein wenig aufgefrischte Code und nun erzähl mir nicht wieder, dass würde nicht funktionieren:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Seite mit Frame</title>
<script type="text/javascript">
"use strict";
var framefenster = document.getElementsByTagName("iframe");


window.onload = function() {
    autoresize_frames();
}


function autoresize_frames() {


    for (var i = 0; i < framefenster.length; ++i) {


        if(framefenster[i].contentWindow.document.body){
        var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;


            framefenster_size = framefenster_size + 20;
            framefenster[i].style.height = framefenster_size + 'px';
        }
    document.getElementById("pruefe").innerHTML = framefenster_size;
    }
}
</script>
</head>
<body style="text-align:center">
  <div>
    <h1>Seite mit Frame</h1>
    <p><iframe id="Frame01" src="seite-im-frame.html" name="Frame01"
    style="width:800px; border:1px solid #0f0; overflow:hidden; margin:0px"></iframe></p>
  </div>
  <div id="pruefe">Platzhalter</div>
</body>
</html>

Alles anzeigen

Melewo

Und da ich nicht begreifen konnte, warum da eine Schleife verwendet wurde, um alle iFrame-Elemente innerhalb eines Dokumentes zu ermitteln, obwohl es nur einen iFrame gibt, habe ich die Schleife nun auch noch entfernt.

Ich weiß, dass einige meiner ersten Scripts Mängel aufweisen, doch wer sich so ein Zeug zusammen sucht, ohne dass er weiß, was er da eigentlich verwenden möchte, der braucht sich auch nicht zu wundern, wenn sich eines Tages Fehler einstellen und er vor einer weißen Seite sitzt. Wenn, so sollten doch auch nur Scripts und Plugins verwendet werden, die ab und an mal aktualisiert werden.

Seite im Frame:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Seite im Frame</title>
</head>
<body>
  <div id="content" style="text-align:center; border:1px solid #000">
    <h1>Seite im Frame</h1>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
</body>
</html>

Alles anzeigen

Seite mit Frame:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Seite mit Frame</title>
<script type="text/javascript">
"use strict";
var framefenster = document.getElementsByTagName("iframe");


window.onload = function() {
    autoresize_frames();
}


function autoresize_frames() {


    if(framefenster[0].contentWindow.document.body){
    
        var framefenster_size = framefenster[0].contentWindow.document.body.offsetHeight;
        framefenster_size = framefenster_size + 20;
        framefenster[0].style.height = framefenster_size + 'px';
            
        document.getElementById("pruefe").innerHTML = framefenster_size;
    }
}
</script>
</head>
<body style="text-align:center">
  <div>
    <h1>Seite mit Frame</h1>
    <p><iframe id="Frame01" src="seite-im-frame.html" name="Frame01"
    style="width:800px; border:1px solid #0f0; overflow:hidden; margin:0px"></iframe></p>
  </div>
  <div id="pruefe">Platzhalter</div>
</body>
</html>

Alles anzeigen

Melewo

Und wenn es doch mehr iFrames auf einer Seite gibt, dann sollte auch jeder iFrame einzeln über eine ID oder wie auch immer angesprochen werden.

CHA

Beim hin- und her- testen bin ich bislang nicht wirklich weiter gekommen.

Das JS-Script:

Code

var framefenster = document.getElementsByTagName("iFrame");
  var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
  function autoresize_frames() {
    for (var i = 0; i < framefenster.length; ++i) {
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
          if(document.all && !window.opera) {
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }
          framefenster[i].style.height = framefenster_size + 'px';
        }
    }
  }

Alles anzeigen

... funktioniert tadellos, nur mit einer kleinen Ausnahme.
Wie schon zuvor erwähnt wächst [COLOR=#ff0000]NUR IM IE 10[/COLOR] der Content des iframe`s Zeile für Zeile
sekündlich nach unten, sodass das iframe bis ins Bodenlose größer wird.

Laut "Melewo" fehlt nachdem es vorerst ein window.setInterval gab,
ein beendendes window.clearInterval.
Bislang habe ich das Script nur komplett damit beenden können oder teilweise
nur ausser Kraft setzen können.

Über Lösungsvorschläge bezüglich des bestehenden Scriptes wäre ich sehr dankbar. :grin:

Trotzdem nochmal großen Dank an "Melewo" für seine Ideen.

Beste Grüße

CHA

Melewo

Zitat von CHA

Beim hin- und her- testen bin ich bislang nicht wirklich weiter gekommen.

Das JS-Script:

Code

var framefenster = document.getElementsByTagName("iFrame");
[COLOR=#ff0000]  // Variable [/COLOR][COLOR=#ff0000][COLOR=#ff0000]auto_resize_timer [/COLOR]definiert aber unbenutzt
  [/COLOR][COLOR=#ff8c00]// Funktionen lassen sich [/COLOR][COLOR=#ff8c00]auch anders starten[/COLOR]
  var [COLOR=#ff0000]auto_resize_timer[/COLOR] = [COLOR=#ff8c00]window.setInterval[/COLOR]("autoresize_frames()", 400);  
                                                                                                    
function autoresize_frames() {
 [COLOR=#ff0000]   // Schleife nicht erforderlich, insofern nur ein iFrame angesprochen werden soll[/COLOR]
    [COLOR=#ff0000]for (var i = 0; i < framefenster.length; ++i) {[/COLOR]   
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
[COLOR=#ff0000]          // all-Objekt ist mehr oder weniger veraltet[/COLOR]
          [COLOR=#ff0000]if(document.all && !window.opera) {    
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }[/COLOR]
          framefenster[i].style.height = framefenster_size + 'px';
        [COLOR=#ff0000]}[/COLOR]
    }
  }

Alles anzeigen

Nun gut, dann noch als kleiner Kommentar.

Und wenn ich die Bezeichner etwas einkürze, erhalte ich ein brauchbares Listing, ohne überflüssigen Schleifen und Variablen, welches in allen getesteten Browsern seine Arbeit verrichtete.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Seite mit Frame</title>
</head>


<body style="text-align:center">
  <div>
    <h1>Seite mit Frame</h1>
    <p><iframe id="Frame01" src="seite-im-frame.html" name="Frame01"
    style="width:800px; border:1px solid #0f0; overflow:hidden; margin:0px"></iframe></p>
  </div>
  <div id="pruefe">Platzhalter</div>
<script type="text/javascript">
"use strict";
window.onload = function() {


    var fenster = document.getElementsByName("Frame01");


    if(fenster[0].contentWindow.document.body){
    
        var dhoehe = fenster[0].contentWindow.document.body.offsetHeight;
        dhoehe = dhoehe + 20;
        fenster[0].style.height = dhoehe +"px";
    [COLOR=#ff8c00]// Nur fuer Testzwecke zur Kontrolle, danach kann diese Zeile entfernt werden[/COLOR]        
    document.getElementById("pruefe").innerHTML = dhoehe;
    }
}
</script>   
</body>
</html>

Alles anzeigen

CHA

Hallo "Melewo" ...

dein Script bringt aber nicht den gewünschten Effekt.
Dein Script bleibt bei einer bestimmten Höhe stehen und schneidet ab.

Ich will auch keine zusätzlichen DIVs um und ins iframe bauen,
sondern nur eine bestimmte Quelle darstellen lassen, die widerum
eine TAB-Einheit bildet, mit Menü usw.

Die Inhalte der einzelnen html Dateien sind halt unterschiedlich lang,
und das iframe soll halt auch nur die Höhe des gerade dargestellten
Content im iframe anzeigen, sodass der header und footer immer den
gleichen Abstand zum Content bekommt.

Diesen Zweck erfüllt das Script komplett.,.,., nur der IE wirft pro Zeile
sekündlich Platz nach unten aus.
Wie gesagt: das Script funktioniert in FF, GC, OPERA super und ohne Tadel.
Da werfe ich doch das Script nicht einfach über Bord, ohne das mir ein anderes
ein ähnlichen Effekt liefert.

Jetzt fehlt nur noch der Kniff um den IE zu erzählen: "keine weiteren Zeilen
nach dem Aufruf erfolgen lassen".

Beste Grüße

CHA

Melewo

Zitat von CHA

Die Inhalte der einzelnen html Dateien sind halt unterschiedlich lang,
und das iframe soll halt auch nur die Höhe des gerade dargestellten
Content im iframe anzeigen,

Und genau dafür verwende ich schon seit Jahren ein Script ähnlich dem auf der letzten Seite von mir vorgestellten Listing, welches ich nur noch einmal ein klein wenig aktualisierte. Und genau damit binde ich zum Beispiel den Content mit Angeboten von Amazon ein, der von der Höhe nie einheitlich ist. Und so benutze ich das bereits seit Jahren, weiß nicht mehr ob ab IE 7, doch mindestens ab IE 8 bis IE 10 gab es damit bisher nicht das geringste Problem, von dem ich je etwas erfahren hätte.

Um mal ein Beispiel zu bringen, die Buchempfehlungen auf der verlinkten Seite werden im iFrame geladen. Und falls der iFrame bei Dir nicht weglaufen sollte, dann brauchst Du nur in den iFrame zu klicken, um Dir den Quelltext vom iFrame anzeigen zu lassen und kannst Dir den Body-Tag kopieren.

Beispiel

Der Unterschied zum Listing von der letzten Seite besteht darin, dass ich JavaScript dort noch mit onload im Body-Tag notierte, heute aber lieber JavaScript und HTML trenne.

Melewo

Was zu Problemen führen könnte, ist Cross Site Scripting, weil das im Widerspruch zur Same Origin Policy steht, an dem sich eigentlich alle Browser mehr oder weniger halten sollten. Beispiele, was geht und was nicht geht findest Du hier:

http://de.wikipedia.org/wiki/Same-Origin-Policy

Und was auch noch zu Problemen führen könnte, wenn Du versucht die Höhe von einem nicht vorhandenen Element zu ermitteln. In den letzten Beispielen ist eine Kontrolle eingebaut, welchen Wert gibt diese im IE aus?

Melewo

Kleiner Nachtrag noch, habe mal nach diesem Script gesucht, wurde ja oft genug kopiert, wie es scheint.

window.setInterval soll der laufenden Anpassung dienen, falls sich die Höhe des Contents im iFrame verändert, während sich ein User auf der Seite befindet. So kann der iFrame halt alle 400 (je nach Einstellung) Millisekunden auf einen sich verändernden Content im Frame reagieren. Ist aber bei der Einbindung einer HTML-Seite mit normalen Content nicht erforderlich und gegebenenfalls bei Seiten mit sich verändernden Content mit window.parent.postMessage besser umsetzbar.

Bei Seiten mit Blätterfunktionen im iFrame ist beides nicht erforderlich, wenn die Höhe bei onload neu durchgereicht wird.

CHA

mOiNMoIn Melewo,

ich muss hinzufügen das dein Script bei mir nur teils funktioniert.

Folgende Prozedure:

Wenn die erste Seite im iframe lädt, dann wird der Content richtig in Höhe angezeigt bzw. wird angepasst.
Nun klicke ich in einem Tab Menü auf ein Button und es öffnet sich ein größerer Content, dann wird er nicht
neu bemessen, sondern erst wenn ich die gesamte Seite aktualisiere und das widerum auch nur im IE.
Der Firefox springt beim neuladen der Seite wieder zur Start.html die im iframe sitzt.

Hast du da vielleicht ne Idee, wie man die einzelnen html Seiten im iframe bei Aufruf nachladen kann?

Da hapert es nämlich.

Beste Grüße

CHA

Willkommen! Melden Sie sich an oder registrieren Sie sich.

iFrame HÖHE dynamisch anpassen lassen ( Forum Integration )

Jetzt mitmachen!