[PHP-HTML-JavaScript] Resize iFrame vanuit de iframe content

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • Tijgertje84
  • Registratie: Augustus 2005
  • Laatst online: 04-06 14:43
De meeste zullen wel denken: "Heb je weer zo'n iframe resize vraag.... |:( !!!"
MAAR dit keer is het toch wel net ietsjes anders (geloof ik)! }:O

Om het verhaal makkelijker te houden vertel ik alleen het gedeelte waar het probleem zich voordoet.

De situatie:
Ik heb een PHP pagina waarin ik simpel weg een iFrame heb.
PHP:
1
2
3
4
5
6
7
8
9
10
<h1>Repository Overview</h1>
<table width="100%">
    <tr>
        <td>
            <iframe id="iframe" frameborder="0" width="100%" height="400px" 
                src="<? echo DIRECTORY_IFRAME?>repository_file_tree.php">
                Sorry, your browser does not support iframes!</iframe>
        </td>
    </tr>
</table>


De content van deze iFrame is een pagina met een boomstructuur die in- en uitgeklapt kan worden.
Het leuke en tevens het venijnige daarvan is, dat daarmee de height van de content generiek groter en kleiner wordt.
Nu heb ik de height op 400px staan wat betekend dat de height ten aller tijde hetzelfde is. Hiermee ontstaat ook mijn probleem waarbij ik de boom op meerdere niveau's uit wil klappen er een scrollbalk ontstaat zodat er binnen het iframe gescrollt kan worden.
Prima, maar dit is eigenlijk niet wat ik zoek.

Als ik overigens voor height 100% gebruik werkt dit perfect in FF en past de iframe zich aan op de start height van de ingeklapte boomstructuur. Zodra je een van de 'bladeren' uitklapt krijg je meteen een scrollbalk omdat de height van de iframe zich op start height van de content focust bij de onload.
Tevens werkt dit verhaal met de 100% niet met IE6 waar je niet eens de contect van de iframe te zien krijgt...
Vandaar mijn tijdelijke oplossing om als begin een fixed height mee te geven.

Ik heb tal van scripts gevonden, maar het waren allemaal standaard vragen hoe een iframe werkt etc en hoe je de standaard height set. Dit is dus niet wat ik zoek.

Het probleem:

Hoe krijg ik de height van de iframe dynamisch op basis van de 'continue' wijzigende height van de content?

Met andere woorden: Hoe kan ik de iframe in hoogte mee laten groeien zodra je de boomstructuur in de content van iframe uitklapt? Hij moet dus de height wijzigen zodra je, in de huidige situatie, een scrollbalk te zien krijgt?

Een andere mogelijkheid zou zijn dat ik op de boomsctructuur een onclick functie zet (bij het in- uitklappen van de boom dus) die niet in zijn eigen frame maar de property height van de iframe (waar hij dus zelf de content van is) aanpast ofwel een resizeFrame() aanroept ofzo...

Ik heb alleen geen idee hoe ik met javascript de elementen kan benaderen vanuit een iframe..

(ivm met proxy kan ik geen foto's uploaden)

Alvast bedankt!

Edit:
Heb als simpele test even een javascript geplaatst op de pagina (ervanuitgaande dat dit later de resizeIframe moet worden)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1>Repository Overview</h1>
<script language="javascript">
function test(){
    alert("TEST");
}
</script>
<table width="100%">
    <tr>
        <td>
            <iframe frameborder="0" width="100%" height="400px" 
                src="<? echo DIRECTORY_IFRAME?>repository_file_tree.php">
                Sorry, your browser does not support iframes!</iframe>
        </td>
    </tr>
</table>


en in de pagina (content) die in de iframe zelf wordt geladen een knop met de actie test()
HTML:
1
2
3
...
<input type="button" onclick="javascript:test();" name="btnDownload" value="Download">
...

Maarja dat werkt dus niet :) En als je ipv een butten zou doen en in de body zelf de test() aanroept krijg je in IE de melding 'Object expected' en dat klopt aangezien die content de functie test() helemaal niet kent...

[ Voor 17% gewijzigd door Tijgertje84 op 13-11-2009 13:56 ]

Intel© Conroe E6600 | Asus P5Q PRO Turbo | Sapphire Vapor-X HD5770 1GB | G.E.I.L. 2 GB DDR2-667 Kit CL4 4-4-12 | WD Caviar SE16 2x250GB (S-ATA2) (Raid0) | Sunbeam Trio | Chaintec CFT-500A | Windows XP Pro SP3 | Samsung Syncmaster S23A350H


Acties:
  • 0 Henk 'm!

  • MueR
  • Registratie: Januari 2004
  • Laatst online: 01:33

MueR

Admin Tweakers Discord

is niet lief

Een iFrame is gewoon een verkeerde keuze hiervoor. Dit kan ook prima in een div met unordered lists.

Anyone who gets in between me and my morning coffee should be insecure.


Acties:
  • 0 Henk 'm!

  • Tijgertje84
  • Registratie: Augustus 2005
  • Laatst online: 04-06 14:43
MueR schreef op vrijdag 13 november 2009 @ 14:04:
Een iFrame is gewoon een verkeerde keuze hiervoor. Dit kan ook prima in een div met unordered lists.
Klopt, maar ik ben naar iframe uitgeweken omdat ik problemen had met een javascript dat de functie window.onload aanriep. Terwijl deze al in een andere script ook werd aangeroepen.

Intel© Conroe E6600 | Asus P5Q PRO Turbo | Sapphire Vapor-X HD5770 1GB | G.E.I.L. 2 GB DDR2-667 Kit CL4 4-4-12 | WD Caviar SE16 2x250GB (S-ATA2) (Raid0) | Sunbeam Trio | Chaintec CFT-500A | Windows XP Pro SP3 | Samsung Syncmaster S23A350H


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 17-09 12:52

Bosmonster

*zucht*

Kijk eens naar een library als jQuery, die handelt al dat soort zaken voor je af, als je daar zelf moeite mee hebt. Dan hoef je ook niet te gaan k*tten met iframes.

Acties:
  • 0 Henk 'm!

  • Joolee
  • Registratie: Juni 2005
  • Niet online
Tijgertje84 schreef op vrijdag 13 november 2009 @ 14:15:
[...]

Klopt, maar ik ben naar iframe uitgeweken omdat ik problemen had met een javascript dat de functie window.onload aanriep. Terwijl deze al in een andere script ook werd aangeroepen.
Dan kun je beter dat probleem oplossen (is niet heel lastig) dan nu zelfs iframes te gaan fixen.

Denk aan iets als:
JavaScript:
1
2
3
4
5
var = window.onload;
window.onload = function() {
var();
nieuweFunctie();
}

Deze code gaat niet werken maar deze methode wel.

Acties:
  • 0 Henk 'm!

  • Tijgertje84
  • Registratie: Augustus 2005
  • Laatst online: 04-06 14:43
Joolee schreef op vrijdag 13 november 2009 @ 14:33:
[...]

Dan kun je beter dat probleem oplossen (is niet heel lastig) dan nu zelfs iframes te gaan fixen.

Denk aan iets als:
JavaScript:
1
2
3
4
5
var = window.onload;
window.onload = function() {
var();
nieuweFunctie();
}

Deze code gaat niet werken maar deze methode wel.
Ja klopt had ik ook al gezien geprobeerd zonder resultaat.
Ben toch maar weer van het iframe afgestapt, hoewel dit wel mijn oude probleem verhielp :P
Ik zal wel een topic maken van het oude probleem waar ik nu weer mee zit. Eerst weer zelf even gaan prutsen :)

Intel© Conroe E6600 | Asus P5Q PRO Turbo | Sapphire Vapor-X HD5770 1GB | G.E.I.L. 2 GB DDR2-667 Kit CL4 4-4-12 | WD Caviar SE16 2x250GB (S-ATA2) (Raid0) | Sunbeam Trio | Chaintec CFT-500A | Windows XP Pro SP3 | Samsung Syncmaster S23A350H


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 17-09 12:52

Bosmonster

*zucht*

Joolee schreef op vrijdag 13 november 2009 @ 14:33:
[...]

Dan kun je beter dat probleem oplossen (is niet heel lastig) dan nu zelfs iframes te gaan fixen.

Denk aan iets als:
JavaScript:
1
2
3
4
5
var = window.onload;
window.onload = function() {
var();
nieuweFunctie();
}

Deze code gaat niet werken maar deze methode wel.
var is een gereserveerd keyword :P
Pagina: 1