✔ iframe Größe an Inhalt anpassen

S

schlurpsel

Gesperrt
hey,
kennt einer von euch ein Script, mit dem sich die Größe eines iframes automatisch an den Inhalt des iframes anpasst.
hab scho gegoogelt doch nichts gefunden, was funktioniert,
danke
schlurpsel
 
Hi,

wie du es kurz umrissen hast, ist hierfür ein Script erforderlich, weshalb ich den Thread aus dem HTML- ins Javascript-Forum schiebe, denn HTML ist keine Script- sondern eine Auszeichnungssprache, mit der so etwas technisch überhaupt nicht möglich ist.

http://www.doktormolle.de/temp/iframe_resize2/ dürfte dir bei deinem Vorhaben weiterhelfen.
 
hier mal der Code der index:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script  type="text/javascript">
function hover(obj) { 
var obj = document.getElementById(obj); 
if(!obj.defaultBgColor) obj.defaultBgColor = (obj.style.backgroundColor!="")?obj.className:""; 
if(!obj.fixed) obj.className = "navmark"; 
} 
function leave(obj) { 
var obj = document.getElementById(obj); 
if(!obj.fixed) obj.className = obj.defaultBgColor; 
} 
function fix(obj) { 
var obj = document.getElementById(obj); 
if(obj.fixed) { 
obj.className = obj.defaultBgColor; 
obj.fixed = false; 
} 
else { 
obj.className = "navmark"; 
obj.fixed = true; 
} 
} 
function fixhard(obj) { 
var obj = document.getElementById(obj); 
obj.className = "navmark"; 
obj.fixed = true; 
} 
function reset(obj) { 
var obj = document.getElementById(obj); 
obj.fixed = false; 
obj.className = obj.defaultBgColor; 
} 
</script>

<script type="text/javascript">
<!--
function resize_me(n)
{
    d=10;ifObj=document.getElementsByName(n)[0];p=(document.all)?'scroll':'offset';
    //eval("ifObj.style.width=window.frames[n].document.getElementsByTagName('body')[0]."+p+"Width+"+d);
    eval("ifObj.style.height=window.frames[n].document.getElementsByTagName('body')[0]."+p+"Height+"+d);
}
//-->
</script>

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Stil2 {font-size: 12px; color:white;}
.Stil3 {font-family: Verdana, Arial, Helvetica, sans-serif}
.nav {font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;color:white;cursor:pointer;cursor:hand;}
.navover {font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;color:white; text-decoration:underline;cursor:pointer;cursor:hand;}
.navmark {font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;color:black; background-color:white;cursor:pointer;cursor:hand;}
.line {text-decoration:underline;}
-->
</style></head>

<body onload="window.status='';"><div style="width:900px; height:19px; background-color:black; padding-top:3px;"><span class="Stil3">
  <marquee width="900" height="20">
  <span class="Stil2"></span>
  </marquee>
</span></div>
<div style="width:900px; height:100px; border-top:1px solid white; border-bottom:1px solid white; background:url(logo/)"></div>
<div style="width:900px; height:50px; background:black; color:white; ">
<div id="nav1d" class="nav" style=" left:10px;padding-left:5px; padding-right:5px; position:absolute; padding-top:17px;  height:33px; " onmouseover="document.getElementById('nav1').className='line';" onmouseout="document.getElementById('nav1').className='';" onclick="fixhard('nav1d');"><a id="nav1" >Aktuell</a></div>
<div id="nav2d" class="nav" style="padding-left:5px; padding-right:5px; position:absolute; padding-top:17px; left:63px; height:33px; " onmouseover="document.getElementById('nav2').className='line';" onmouseout="document.getElementById('nav2').className='';" onclick="fixhard('nav2d');"><a id="nav2" >Regionalliga</a></div>
</div>
<div style="position:absolute; vertical-align:top; width:900px;">
<iframe width="175" src="right.html"  frameborder="0" scrolling="no" name="left"></iframe></div>
<div style="width:550px; position:relative; left:175px;"><iframe width="550" src="home.html" frameborder="0" scrolling="no" name="main"></iframe></div>
<div style="width:175px; position:absolute; top:174px; left:725px; "><iframe width="175" src="right.html" frameborder="0" scrolling="no" name="right"></iframe></div>


</body>
</html>

und die Datei im iframe (name=main) sieht so aus:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK href="style/seiten.css" type=text/css rel=stylesheet>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
-->
</style>

</head>

<body onload="javascript:parent.resize_me('left');javascript:parent.resize_me('main');javascript:parent.resize_me('right');">
<div>
</div>
</body>
</html>

und das ganze geht im Firefox nicht, da haben die iframes ne bestimmte Größe (so groß wie wenn ich keine Größe beim iframe eingebe.
hoffe, ihr könnt helfen, danke
schlurpsel
 
Hi,

das empfohlene Beispiel funktioniert im Firefox aber einwandfrei.


[editpost]

Übergib das Dokument, wie im Original, im "Quirksmode", und nicht im "Standardsmode".
 
Es gibt keine vernünftige Methode, die Breite des Inhaltes herauszubekommen.
Daher hatte ich in dem ursprünglichen Thema dazu empfohlen, in der Breite einen fixen Wert zu verwenden.

Nach erneuter Suche hab ich auch keine unvernünftige Methode gefunden, mit der man das bewerkstelligen könnte.
 
hey,
also das Beispiel-Script geht bei meinem Firefox auch problemlos, nur mein eigenes (siehe Quelltext) nicht.

Außerdem hab ich schon ne feste Breite gesetzt, des muss durch das Script also nur noch die Höhe angepasst werden.

Die Höhenanpassung funktioniert insofern nicht, dass beim Firefox die Größe des iframes (mit Srcipt) so ist, wie wenn ich keine Größe für den iframe eingebe. Wenn ihr meine 2 Dateien mal bei euch öffnet, wie ists dann bei euch, geht mim FF. Oder seht ihr vielleicht nen Fehler?

danke

schlurpsel
 
hab jetzt das:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
durch das am Anfang der index.html ersetzt:
<!DOCTYPE>

Und es geht .:freuzz:. !

Könnt ihr mir noch ne Erklärung geben, was das ganze genau bewirkt hat, etc.?

danke für die super Hilfe
schlurpsel
 
hey,
ich verwende jetzt das Script von oben und es funktioniert prächtig.
Doch jetzt habe ich noch ein Problem, wäre es möglich, in das Script etwas einzubauen, dass der iframe ne mindestgröße hat. In meinem Fall sollte er nie kleiner wie 200 sein, größer soll er sich dann aber wieder anpassen.
hoffe es geht
danke
schlurpsel
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück