tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von hoctar
ERLEDIGT
NEIN
ANTWORTEN
8
ZUGRIFFE
844
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 18.01.11 16:00 #1
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    Salü allerseits,

    hab viel im Internet recherchiert und zwei Möglichkeiten gefunden, die Höhe eines IFrames an den Inhalt anzupassen, sodass nicht mehr vertikal gescrollt werden muss.

    Möglichkeit 1 (von der Seite aus, die den IFrame enthält):
    HTML-Code:
    <script language="JavaScript" type="text/javascript">
		function iFrameHeight(id) {
			var e = document.getElementById(id);
			var h = 0;
			if (!document.all) {
				h = e.contentDocument.height;
				e.style.height = h + 20 + 'px';
			} else if (document.all) {
				h = document.frames(id).document.body.scrollHeight;
				document.all.frames(id).style.height = h + 20 + 'px';
			}
		}
	</script>

[...]

<iframe id="foobar" onload="iFrameHeight('foobar');">
    Möglichkeit 2 (von der Seite aus, die Inhalt des IFrames ist):
    HTML-Code:
    	<script language="JavaScript" type="text/javascript">
		function iFrameHeight (frame, content) {
			var height = document.getElementById(content).offsetHeight + 20 + 'px';
			parent.document.getElementById(frame).style.height=height;
		}	
	</script>

[...]

<body id="content-site" onload="iFrameHeight('foobar', 'content-site');">
    Beide Möglichkeiten funktionieren beim Aufruf der Seite problemlos. Allerdings gibt es auf der Inhalts-Seite einige Divs, die per JS ausgeklappt werden können. Ich habe noch keine Möglichkeit gefunden, wie ich beim Aufklappen die Höhe aktualisieren kann. Mit der 2. Möglichkeit und dem gleichen Script im onfocus müsste es eigentlich gehen, tut es aber nicht. Kann es sein, dass JS nur auf das Original-DOM zugreift und nicht auf das durch JS geänderte?

    Wie kann ich auf das geänderte DOM zugreifen?

    Gibt es auch eine Möglichkeit, mit Möglichkeit 1 zum Ziel zu kommen?

    Würde mich über Tipps freuen.

    Grüße,
    Fred
     
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
  2. 18.01.11 17:25 #2
    stef03 stef03 ist offline Rookie
    Registriert seit
    Jan 2011
    Beiträge
    9
    Hallo

    Versuxh einfach den iFrame tag mit width="" und height="" zu ergänzen.

    Lg Stefan
     
    Zitieren Zitieren
  3. 19.01.11 14:34 #3
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    Hey Stefan,

    was sollte das bewirken?

    Ich habe width="100%" eingestellt und das soll auch so bleiben, da ich die Breite nicht dynamisch einstellen will, da unnötig.

    height="" ändert nichts am bisherigen Verhalten.

    Hast du noch ne andere Idee?

    Grüße,
    Fred
     
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
  4. 19.01.11 15:29 #4
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    Ich hab jetzt mit verschiedenen Event-Handlern im body-Tag rumgespielt, die aber alle nicht 100%-ig zum gewünschten Ergebnis geführt haben.

    Mit onmouseup, onclick, etc. funktioniert es zwar, wenn man auf eine beliebige Fläche in der Seite klickt. Wenn ich aber ausgerechnet auf den Drop-Down-Pfeil klicke, durch den die Höhe der Seite verändert wird, passiert leider nichts

    Gibt's irgend ne Möglichkeit, Änderungen am DOM laufend zu überprüfen und auf eine Änderung zu reagieren?

    Viele Grüße,
    Frezl
     
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
  5. 19.01.11 21:24 #5
    stef03 stef03 ist offline Rookie
    Registriert seit
    Jan 2011
    Beiträge
    9
    Sorry fred,

    Hab leider sonst keine Idee.
    Ich dachte so hab ich das einmal gemacht.
    Hab mich wohl geihrt.

    Lg Stefan
     
    Zitieren Zitieren
  6. 19.01.11 21:27 #6
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    Hey Stefan,

    macht nix, ich versuchs weiter

    Grüße,
    Fred
     
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
  7. 20.01.11 09:25 #7
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    wenn du das Aufklappen der DIVs im iFrame-Dokument mit JavaScript realisierst, kannst du doch am Ende der Routine das Anpassen des iFrames anstossen.

    Beispiel:

    Hauptdokument
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
 //-->
</style>
<script type="text/javascript">
<!--
function iFrameHeight(id) {
  var e = document.getElementById(id);
  var h = 0;
  if (!document.all) {
    h = e.contentDocument.height;
    e.style.height = h + 20 + 'px';
  } else if (document.all) {
    h = document.frames(id).document.body.scrollHeight;
    document.getElementById(id).style.height = h + 20 + "px";
  }
}
//-->
</script>
</head>
<body>
<iframe src="iframe_doc.html" id="foobar" onload="iFrameHeight('foobar');">
</body>
</html>
    iFrame-Dokument
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function resizeDiv(){
  var objDiv = document.getElementById("divId");
  var intH   = parseInt(objDiv.style.height) + 4;
 
  if(intH < 400){
    objDiv.style.height = intH + "px";
    window.setTimeout(function(){resizeDiv();}, 30);
  }else{
    parent.iFrameHeight('foobar');
  }
}
//-->
</script>
</head>
<body>
<button onclick="resizeDiv();">resizeDiv</button>
<div id="divId" style="height: 40px; background: #900;">&nbsp;</div>
</body>
</html>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  8. 20.01.11 10:14 #8
    hoctar hoctar ist offline Mitglied Brokat
    Registriert seit
    Jun 2007
    Beiträge
    344
    Du könntest auch ein Interval setzen, welches die Höhe jede Sekunde prüft und anpasst.

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    function iFrameHeight(id) {
    var e = document.getElementById(id);
    var h = 0;
  
    setInterval(function() {
        if(!document.all) {
            h = e.contentDocument.height;
            e.style.height = h + 20 + 'px';
        } else if (document.all) {
            h = document.frames(id).document.body.scrollHeight;
            document.getElementById(id).style.height = h + 20 + "px";
        }
    }, 1000);
}
    Frezl bedankt sich. 
    Zitieren Zitieren
  9. 31.03.11 15:43 #9
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    Hey hoctar,

    hab mich nach langer Zeit mal wieder mit dem Problem beschäftigt und deine Lösung gefällt mir sehr Zumindest ist es bis jetzt die einzige, die das von mir gewünschte Resultat liefert. Damit keine Scrollbalken aufblitzen hab ich allerdings das Intervall auf 10 (Millisekunden?) runtergestellt. Könnte mir vorstellen, dass das ziemlich auf den Prozessor geht.

    Daher gefällt mir Quaeses Vorschlag vom Ansatz her eigentlich besser. In die bestehenden Funktionen selbst will ich aber nichts reinschreiben, wie Quaese das vorgeschlagen hat, da es sich um ein fertiges CMS handelt, in dem ich nicht rumpfuschen will. Gibt es irgendwie ne Möglichkeit, dass die Funktion automatisch ausgeführt wird, nachdem eine beliebige andere JS-Funktion ausgeführt wurde? Dass praktisch das Skript alle Aktionen überwacht und nach einer Änderung am DOM sofort die iFrameHeight-Funktion ausführt.

    Viele Grüße,
    Frezl
    Geändert von Frezl (31.03.11 um 15:46 Uhr)
     
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
« Mootools und jQuery gleichzeitig | Suchvorschläge bei der Eingabe eines Keywords ausgeben »

Ähnliche Themen

  1. Blog in IFrame laden und Höhe automatisch anpassen?
    Von Chrith im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 12.06.10, 20:37
  2. iframe Höhe Automatisch anpassen
    Von Nemesis1 im Forum Javascript & Ajax
    Antworten: 15
    Letzter Beitrag: 05.04.09, 17:32
  3. höhe eines div in abhängigkeit eines anderen div anpassen
    Von Emu-Emsen im Forum CSS
    Antworten: 4
    Letzter Beitrag: 11.02.08, 18:52
  4. Iframe-Höhe anpassen
    Von Html im Forum PHP
    Antworten: 7
    Letzter Beitrag: 27.07.06, 11:43
  5. table scrollen, iframe, object - Höhe anpassen
    Von veru im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 26.01.04, 18:07

Stichworte