IFrames resizeGeplaatst: 14 jan 2010, 12:55

DangerMX2004 · 15 jan 2010

Ik zal me eerst even voorstellen ik ben een student van 18 jaar, woonzaam in Arnhem. Ik was op zoek naar een dreamweaver forum en zodoende heb ik me hier aangemeld. Ik had het bij een forum dreamweaverhulp geprobeert maar deze lijkt alles behalve actief.

Zojuist ben ik tegen het volgende probleem zojuist aangelopen. Ik wil een Iframe gebruiken om andere pagina's via een menu in te laden. Het inladen doet die prima alleen de hoogte resizen doet die niet. Pas als ik me IE bowser verklein of vergroot word de inhoud van de IFrame op de juiste hoogte weergeven, met de breedte zijn er verder geen problemen deze heeft ook een vaste waarde. Verder in Firefox doet die al helemaal niks en blijft die op een kleine hoogte.

Code:

<!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=utf-8" />
<title>Iframe</title>
<style>
<!--
#Hoofdframe {
   width:523px;
   min-height:100%;
   height:auto !important; /* voor moderne browsers */
   height:100%; /* voor IE */
   position:absolute;
   left: 142px;
   top: 154px;
}
#MainContent {
   width: 523px;
   top: 154px;
   position: absolute;
   left: 142px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}
-->
</style>
</head>
<body>
<a href="#" onclick="Hoofdframe.location.href='test.php';getElementById('Hoofdframe').frameBorder=0">>test</a><br />
<a hrefa href="#" onclick="Hoofdframe.location.href='test2.php';getElementById('Hoofdframe').frameBorder=0">test2</a>
<div id="MainContent">
<IFRAME title="Hoofdframe" id="Hoofdframe" name="Hoofdframe" src="voorbeeld.php" scrolling="no" FRAMEBORDER="0" BORDER="0" marginheight="0" marginwidth="0" width="100%"></IFRAME>
</div>
</body>
</html>

Mvg,
Nico

edit:
waar kan ik me titel aanpassen?

csshunter · 16 jan 2010

Hoi Nico,

Danger 1: { position: absolute; }
Het gebruik van absolute posities voor layout is altijd behoorlijk tricky. Je hebt de container #MainContent op een absolute plek neergezet, en het iframe daarbinnen via #Hoofdframe ook. Maar een absoluut gepositioneerd element komt buiten de zg. "normal flow" (= ontsnapt aan de normale volgorde, en gaat onafhankelijk zijns weegs).
Nu heeft de #MainContent geen hoogte meegekregen, maar wel een "overflow: hidden" = wat er niet in past wordt niet getoond.
Ik denk dat je in jouw geval de #MainContent container voor het iframe gewoon kunt missen, dan zal het beter gaan. Alle styles voor het iframe kunnen helemaal met het #Hoofdframe geregeld worden, lijkt me.

Danger 2: javascript
Door javascript te gebruiken voor het switchen naar een andere pagina, maak je je site onbruikbaar voor mensen die javascript uit hebben staan, of die surfen met een browser die geen javascript heeft (bv. een text-browser of een text-voorleesbrowser).

Als het goed is, wordt javascript alleen gebruikt voor extra functionaliteit die ook gemist kan worden. Zonder javascript moeten de essentiele zaken van een site evengoed bezichtigd kunnen worden!

Danger 3: (i)frames!
Maar ... waarom zou je een iframe gebruiken voor het laten zien van pagina's van je site?
Door dat te doen maak je het bv. onmogelijk om iemand anders een directe link naar een bepaalde pagina op je site te geven (alles zit binnen die ene pagina waar het iframe in zit), zoekmachines kunnen er niet mee overweg, en de site wordt er voor een aantal mensen/browsers ontoegankelijk door.

Met vriendelijke groet,
CSShunter

DangerMX2004 · 16 jan 2010

Allereerst bedankt voor de reactie. Dit was een voorbeeld. In me site bestand staat alles in een container etc.

. Ik dacht dat het misschien makkelijk was om php pagina's in te laden zodat deze makkelijker zijn uit te breiden en aan te passen. De website bevat veel content en ik dacht dat Iframes een oplossing kon bieden en dat er laadtijden verkort worden. Het is nu inderdaad niet meer mogelijk een directe link te plaatsen. Ik denk dat het verstandiger is het pagina voor pagina op te bouwen.

Mvg,
Nico

csshunter · 16 jan 2010

Ja, dat denk ik ook. Als je gaat vergelijken, krijg je ongeveer het volgende.

Bij php-site per pagina in te laden:

HTML:

<head>
...
stylesheet (eenmalig)
...
</head>
<body>
vaste bestanddelen als includes: header, menu, footer e.d.
<div id="content">
...
</div>
</body>

Bij iframe-opzet:
eenmalig de hoofdpagina met vaste bestanddelen:

HTML:

<head>
...
stylesheet
iframe wissel-script
...
</head>
<body>
vaste bestanddelen header, menu, footer e.d.
<iframe id="content"></iframe>
</body>

en per iframe toch een volledige pagina (minus header/menu/footer):

HTML:

<head>
...
eigen stylesheet (eenmalig)
...
</head>
<body>
<div id="content">
...
</div>
</body>

De winst die je met een iframe zou behalen, bestaat dus uit het niet meer per pagina hoeven in te laden van de vaste bestanddelen header/menu/footer.
Maar zeker bij veel content vragen header/menu/footer weinig code t.o.v. de content-html; dan wordt de download-winst naar verhouding erg klein, en zal het (zeker bij snelle verbindingen) weinig uitmaken op het totaal. En dat voordeel kan bij lange na niet de nadelen van iframes goedmaken.

Met vriendelijke groet,
CSShunter

IFrames resizeGeplaatst: 14 jan 2010, 12:55

DangerMX2004

Nieuwe gebruiker

csshunter

Meubilair

DangerMX2004

Nieuwe gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy