IFrame - Automatische Höhe mittel JavaScript

M

medico

Erfahrenes Mitglied
Hallo zusammen,

ich habe eine Webseite mit Wordpress erstellt und dort lasse ich eine Seite aus einem Unterverzeichnis per IFrame anzeigen.
Nun soll scih die Höhe des Iframe an die Seite anpassen die im Iframe geladen wird. Das habe ich mittels JavaScript gelöst.

Es klappt so einiger massen, nämlich nur dann wenn ich die Seite Wordpress-Seite ohne www. aurufe, sobald ich diese mit www. aufrufe funktioniert die automatische höhe nicht.

Damit könnte ich eigentlich leben, schöner wäre es aber mit www.

Aber das ist nicht das Problem, sondern ich möchte gerne absofort die Seite die im Iframe geladen wird, per https:// laden, weil sich dort User einloggen können. Wenn ich das aber so einstelle dann funktioniert die automatische höhe nicht.

Hat einer eine Idee woran das liegt und was ich ändern muss.

Der Link der WP Seite sieht so aus: domain.de
Der Iframe der geladen wird so: https://domain.de/unterverzeichnis/

Hier mal mein Javascript:
HTML: 
<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>

Ich hoffe Ihr könnt mir helfen.

Gruß Medico
 
Also ich mach das auf unserer Seite so:

Auf der Seite, die den iframe enthält unterhalb des body-tags folgendes script

HTML: 
<script language="javascript" type="text/javascript">

    function size_iframe(n , d){
 // 1.Parameter 'n' -> Name des iframes  / 2.Parameter 'd' -> Zugabe zur errechneten Höhe  -> ausprobieren     
            ifObj=document.getElementsByName(n)[0];
 
            p=(document.all)?'scroll':'offset';
 
          
            eval("ifObj.style.height=Math.max(200,window.frames[n].document.getElementsByTagName('body')[0]."+p+"Height+"+d+")+'px'");
         
 // 200 ist hier die Mindesthöhe -> ggfs. anpassen        
        };
   
</script>

....
<iframe  src="..."   name="n"   >  </iframe>

und auf der eingebundenen Seite:
HTML: 
<body onload ="parent.size_iframe('n' , 40);" >


<!--  und, um die Funktion bei einem horizontalem 'Fenster-Resize' auszuführen -->

<script  language="javascript" type="text/javascript">
 width = $(window).width(); 
function Resize()
{
	if ($(window).width()!=width){
parent.size_iframe('n' , 40) ; 
width = $(window).width();
}
 }
 window.onresize = Resize ;
</script>

getestet mit FF, IE8+, Chrome und Opera

Gruß Krishan
 
Danke für deine Antwort.
Leider ist das bei mir nicht so einfach möglich, da die eingebundene Seite aus endlichen seiten besteht und ich das nicht in jede Datei einbinden kann/möchte.
 
Du brauchst die Höhe des DOM, davon ziehst du den Header + Footer usw. ab (in Pixel), das was dann übrig bleibt (-10-15px) ist die Höhe deines Iframes:

http://wittesoft.de/1work/js_iframe_resize/ (Funktioniert allerdings bei mir im FF nicht, der ist bei mir aber auch ziemlich am Ende), aber Chrom+Chromium keine Probleme ;)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück