Archivlink: javarea.de Forum > JavaScript > iFRame Höhe dynamisch ändern
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > iFRame Höhe dynamisch ändern

Pages: [1]
geschrieben von sobi am 12.01.2008 - 23:13
ich benutze folgende Codezeile für einen iFrame::

HTML-Quelltext
1: 

<iframe src="./home.php" id="mainframe" name="mainframe" width="671" height="418" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto"></iframe>


Jetzt möchte ich in Abhängigkeit von der Bildschirmauflösung die iFrame Höhe dynamisch verändern. Beispielsweise soll sie bei 1050px Bildschirmhöhe nicht mehr 418, sondern 618 sein.

Geht so was ?


cu
Uli

geschrieben von Micha am 13.01.2008 - 00:42
Hallo,

ja, es geht sicher aber die Auflösung ist kein Indiz über die Größe des Viewports! Es garantiert Dir ja keiner, dass der Browser im Vollbildmodus ist, oder? Aus diesem Grund ist das "Wie?" gar nicht erst zu betrachten sondern eher das "Warum?".

Gruß Micha

geschrieben von sobi am 13.01.2008 - 13:42
Also mich interessiert eine Lösung, keine Diskussion ob, oder ob nicht.

Es soll zur Verbesserung/Anpassung unserer Vereinshomepage für User mit höheren Bildschirmauflösungen dienen (ein bischen Kosmetik). Ob der User einen Browser im Vollbild laufen hat oder nicht, interessiert micht nicht. Ist seine Sache, wird er schon merken. Ich könnte zwar eine Seite mit "fluid width" programmieren, aber wir haben zu viele statische Elemente, so dass ich lieber eine Lösung mit JS suche. Die statischen Elemente würden mich beim grafischen Ergebnis einer selbst skalierenden Seite stören.

Ich hab probiert

HTML-Quelltext
1: 

parent.document.mainframe.width = "618";


in die Seite im iFrame einzubauen, hat aber kein Resultat gezeigt.
Über eine Lösung/Hinweis würde ich mich freuen. Ob's den Leuten letztlich gefällt, werden wir dann schon zu hören bekommen.


MfG
Uli

geschrieben von Micha am 13.01.2008 - 13:56
Hallo,

Zitat
 Also mich interessiert eine Lösung, keine Diskussion ob, oder ob nicht.

Gut, dann ist die Antwort einfach. Es gibt keine zufriedenstellende Lösung, weil Du das Problem nicht dort versucht zu lösen, wo es entsteht.

Das Objekt screen liefert Dir keine zuverlässigen Daten aber das war Dir ja egal...

Bei der Höhe des Frames kommt es nun drauf an, wer diese zuweisen soll. Das Dokument, welches das iFrame beinhaltet (parent) oder das Dokument, welches ins Frame geladen wird.

Ersteres geht zB einfach mit
HTML-Quelltext
1: 

document.getElementById("mainframe").height = "1234px";

Zweiteres ist, wie Du es bereits versucht hast, mit parent möglich.

Micha

geschrieben von sobi am 13.01.2008 - 17:02
Lieber Micha.

Die Ursachen des Problems liegen in der Gestaltung der Webseite für 1024px Auflösung und dem Umstand, dass immer mehr User die Seite mit höheren Auflösungen besuchen. An den Seiten und den Problemen kann ich erst mal garnichts ändern, weil ich für jede Sache ein ganzens Konsortium (Vorstand) beteiligen muss ;o). Also betreibe ich zunächst mal etwas Kosmetik und nutz die Zeit, um vielleicht mal die Entscheidung für ein neues Weblayout zu bekommen. Das läuft schon seit einem Jahr und wird vielleicht auch noch zwei drei Jahre so weiter gehen. Hinsichtlich solcher Entscheidungen ist der Verein kein "Rennauto". Und solange keine Beschwerden kommen.....oder bis dahin.......

Aber vielen Dank für die Programmzeile. Die Höhe des Frames soll das Dokument zuweisen, das in den Frame geladen wird.
HTML-Quelltext
1: 

parent.document.getElementById("mainframe").height = "1234px";

Das oben sollte dann wohl der passende Code sein. Bitte korregier mich ggf. noch. Ich werd's aber auch sehen wenn's nicht läuft

Danke & Tschüss
Uli

geschrieben von Micha am 13.01.2008 - 17:33
Hi,

Zitat
 Original geschrieben von sobi am 13.01.2008 - 17:02
Aber vielen Dank für die Programmzeile. Die Höhe des Frames soll das Dokument zuweisen, das in den Frame geladen wird.
HTML-Quelltext
1: 

parent.document.getElementById("mainframe").height = "1234px";



Ja, oder wie bei SELFHTML beschrieben über den Frame Namen:

HTML-Quelltext
1: 

parent.mainframe.height = "1234px"


Warum es jedoch das Dokument sein muß, versteh ich nicht. Nun wird ja im Prinzip bei jeder Seite geprüft, wie die Auflöung des Users ist. Es ist jedoch anzunehmen, dass sie sich so schnell nicht ändert. Ich persönlich hätte also die andere Variante genommen, wenn ich nur diese beiden Möglichkeiten hätte.

Micha

geschrieben von sobi am 13.01.2008 - 17:57
Es gibt unterschiedliche Seiten bei uns die aus Gestaltungsgründen (räusper/schmunzel) unterschiedliche Frame Höhen haben sollen. Eigentlich geht es nur darum, dass auf 1200'er oder 1600'er Monitoren nicht so viele weisse Stellen sind, viele unserer Frameinhalte sind zum Scrollen, einige aber garnicht. Bei letzteren sähe ein vergrößerter Frame doof aus, hab ich mal getestet. Eine komplizierte Funktion will ich für das Ganze nicht schreiben. Einfache IF Abfragen sollen es sein. Bei den vielen Monitorauflösunge die es gibt kann es sein, dass ich "exotische" Formate nicht berücksichtige. Ob der Browser dabei aber viel oder mehr rechnen muss ist mir Schnuppe...;o)

Über den Framenamen hab ich es wie beschrieben schon mal versucht. Anscheinend hatte ich irgendeinen Fehler, hab's mit DOCUMENT.MAINFRAME... versucht, klappte nicht. Ich mach mich mal erneut ans Werk


MfG
Uli

geschrieben von sobi am 13.01.2008 - 18:13
Mit der Ansteuerung über die Frame ID klappt es, vielen Dank für den Tipp. Über den Framenamen geht es bei mir nicht, ich vermute mal es liegt an dem Script SEITE IN IFRAME LADEN (siehe Scriptarchiv), welches auch läuft. Da gibt's den Programmpunkt AUS FRAME BEFREIEN, was zu kollidieren scheint (sag ich als JS Laie mal so).

Aber so haut's ja hin.

Tschö Tschö
Uli

geschrieben von Martin am 16.01.2008 - 19:30
Ave,

ein Tipp am Rande. Wenn die Proportionen des IFrame mit Stylesheets definiert werden, lassen sich diese auch über Javascript manipulieren.

Eine reine CSS Variante wäre, max-height und max-width zu verwenden. Leider werden diese aber nicht von jedem Browser interpretiert.

PHP-Quelltext
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: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 

<?
<style type="text/css">
#iframe {
position:absolute;
width:100%;
max-width:1024px;
height:100%;
max-height:768px;
}

#iframe2 {
position:absolute;
width:1024px;
height:768px;
}
</style>

<script typy="text/javascript">
function resizeIFrame( ) {

var max_IFrame_width = 1024;
var max_IFrame_height = 768;

var x,y;
if (self.innerHeight) // all except Explorer
{
    x = self.innerWidth;
    y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
    // Explorer 6 Strict Mode
{
    x = document.documentElement.clientWidth;
    y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
    x = document.body.clientWidth;
    y = document.body.clientHeight;
}

var iframe_obj = document.getElementById("iframe2");

if( iframe_obj.style.width <= max_IFrame_width ) {
 iframe_obj.style.width = x + "px";
}
if( iframe_obj.style.height <= max_IFrame_height ) {
 iframe_obj.style.height = y + "px";
}

}
</script>

<body onResize="resizeIFrame">

<iframe id="iframe"><p>no iframe</p></iframe>
<iframe id="iframe2"><p>no Iframe</p></iframe>
?>



mfg Martin


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.