IFRAME - DOM / Scrollbar-Test
Jens
- dhtml
0 Jens
Hi alle zusammen !
ich bruete jetzt schon den ganzen Tag ueber dem im Thementitel
beschriebenen Problem...
Es sollte im Prinzip ganz einfach sein - auch laut MSDN, wo das
DOM fuer IFRAMEs und dergleichen beschrieben wird, aber ganz
so einfach ist es natuerlich dann doch nicht - warum auch... :(
Einige Properties konnte ich noch selbst austuefteln und soweit
funktioniert das auch ganz gut mittlerweile, allerdings stellte
sich ziemlich schnell ein neues Problem ein:
Wie teste ich, ob der IFRAME scrollbars hat oder nicht ?
die "scrolling" Property hilft hier nicht weiter, da diese ohne
explizite Angabe auf "auto" steht...
Dann dachte ich an "offsetHeight" bzw. "clientHeight"...
Aber das half nicht viel weiter...
Bei DIVs klappt das ganze wunderbar... Aber da kann man eben
keinen SRC explizit angeben... *seufz*
Es koennte so einfach sein... Nuja...
Vielleicht kann mir einer von euch weiterhelfen ?
Achso! Hintergrund der ganzen Sache ist folgendes:
Ich will eine Seite, die aus IFRAMEs aufgebaut wird, dynamisch
neuordnen - auch bzgl. der Hoehe usw.
Dazu dachte ich mir, dass ich jeden IFRAME erstmal solange
verkleinere bis dieser Scrollbars darstellt und dann einfach einen
Schritt zurueckgehe und voilà haette ich die Groesse...
Dann noch alles schoen positionieren und fertig waere die Seite...
Ich habe dieses Forum und das Archiv durchsucht nach dem Problem,
aber da war nichts wirklich brauchbares dabei - auch solche Seiten
wie javascripts.com oder webreference.com usw halfen mir nicht weiter...
Kann auch sein, dass ich nach ca. 10 Stunden mit demselben Problem
ein bisschen den Abstand zu der Sache verloren habe...
Schon mal Danke im Voraus fuer eure Hilfe !!
Bye,
Jens
SOURCE (Properties-Test):
<html>
<head>
<script language="JavaScript">
<!--
function getAllTags()
{
for (var i = 0; i < document.all.length; i++)
{
// alert(document.all(i).tagName);
if (document.all(i).tagName == "IFRAME")
{
// alert(document.all(i).offsetWidth);
// alert(document.all(i).offsetHeight);
// alert(document.all(i).clientWidth);
// alert(document.all(i).clientHeight);
// alert(document.all(i).scrollWidth);
// alert(document.all(i).scrollHeight);
// alert(document.all(i).scrolling);
// alert(document.all(i).document.body.offsetWidth);
// alert(document.all(i).document.body.offsetHeight);
alert(document.all(i).style.overflowY);
var collAll = document.frames("if1").document.body;
alert(collAll.clientHeight);
document.all(i).width = 100;
document.all(i).src = "index.html";
alert(document.all(i).offsetWidth);
alert(document.all(i).offsetHeight);
alert(document.all(i).clientWidth);
alert(document.all(i).clientHeight);
alert(document.all(i).scrollWidth);
alert(document.all(i).scrollHeight);
alert(document.all(i).document.body.offsetWidth);
alert(document.all(i).document.body.offsetHeight);
}
}
document.all('l1').innerHTML = "<meta http-equiv="refresh" content="0;URL=ielayertest.html">";
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onLoad="getAllTags();">
<iframe id="if1" src="ielayertest.html">
</iframe>
<div id="l1" style="width: 300px; height: 100px; visibility: visible; border: 1px solid #000000"></div>
</body>
</html>
Hi nochmals !
also das Problem loest sich so langsam...
Allerdings muss ich dazu sagen, dass das OM hierfuer doch etwas
verwirrend ist...
Fuer alle die es interessiert, ist hier der aktuelle Quelltext
der Testdatei...
Bye,
Jens
SOURCE:
<html>
<head>
<script language="JavaScript">
<!--
function getAllTags()
{
for (var i = 0; i < document.all.length; i++)
{
// alert(document.all(i).tagName);
if (document.all(i).tagName == "IFRAME")
{
// alert("offsetWidth: " + document.all(i).offsetWidth);
// alert("offsetHeight: " + document.all(i).offsetHeight);
// alert("clientWidth: " + document.all(i).clientWidth);
// alert("clientHeight: " + document.all(i).clientHeight);
// alert("scrollWidth: " + document.all(i).scrollWidth);
// alert("scrollHeight: " + document.all(i).scrollHeight);
// alert(document.all(i).scrolling);
alert("offsetWidth (BODY): " + document.all(i).document.body.offsetWidth);
alert("offsetHeight (BODY): " + document.all(i).document.body.offsetHeight);
// alert(document.all(i).style.overflowY);
var collAll = document.frames("if1").document.body;
alert("clientHeight (IFRAME): " + collAll.scrollHeight);
alert("Height (IFRAME): " + document.all(i).height);
(collAll.scrollHeight > document.all(i).height) ? alert("-> ScrollBars") : alert("-> keine ScrollBars");
document.all(i).width = 100;
document.all(i).top = 100;
alert(document.all(i).id);
document.all(i).src = "index.html";
// alert(document.all(i).offsetWidth);
// alert(document.all(i).offsetHeight);
// alert(document.all(i).clientWidth);
// alert(document.all(i).clientHeight);
// alert(document.all(i).scrollWidth);
// alert(document.all(i).scrollHeight);
// alert(document.all(i).document.body.offsetWidth);
// alert(document.all(i).document.body.offsetHeight);
}
}
// document.all('l1').innerHTML = "<meta http-equiv="refresh" content="0;URL=ielayertest.html">";
}
function getAllBODYTags()
{
var collAll = document.frames("if1").document.body;
for (var i = 0; i < collAll.all.length; i++)
{
alert(collAll.all(i).tagName);
}
}
function getAllFrames()
{
for (var k = 0; k < document.frames.length; k++)
{
alert(document.frames(k).location);
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onLoad="getAllTags(); getAllFrames();">
<iframe id="if1" src="../PerformanceMap/menu.htm" height=981>
</iframe>
<iframe id="if2" src="../PerformanceMap/menu.htm" left=600 height=981>
</iframe>
<div id="l1" style="width: 300px; height: 100px; visibility: visible; border: 1px solid #000000"></div>
</body>
</html>