[HTML/CSS] IFrame afmetingen aanpassen naar content

[armageddon_2k1]

Ik heb een iframe met daarin interactieve schema's. Deze schema's willen echter nogal eens van grootte veranderen (niet dynamisch, maar verschillende schema's zijn verschillende grootte). Kan ik ervoor zorgen dat ik gewoon een iframe krijg zonder scrollbars zodat de afmetingen van het iframe groot genoeg zijn om de content te herbergen?

CSS: width: 100% werkt, dus dat zit goed, maar ik krijg de hoogte niet volledig. Ook al height: 100% gebruikt maar dan wordt ie juist kleiner. Zelfs als ik de container boven hem height 100% geef (en al die andere daarboven ook natuurlijk).

[ Voor 3% gewijzigd door armageddon_2k1 op 03-05-2006 13:54 . Reden: foutje, width moest height zijn, thanks ]

[CaptBiele]

armageddon_2k1 schreef op woensdag 03 mei 2006 @ 13:46:
CSS: width: 100% werkt, dus dat zit goed, maar ik krijg de hoogte niet volledig. Ook al width: 100% gebruikt maar dan wordt ie juist kleiner.

moet die 2e width niet height zijn?!

Volgens mij wordt height inderdaad niet ondersteund. (je hebt dus ook html en body 100% height gegeven?)

wellicht kun je proberen om het iFrame in een div te gooien, en die de juiste afmetingen geven.
De iFrame vult dan die div volledig...

maar ik heb hier niet zo veel ervaring mee moet ik zeggen

[Boelie-Boelie]

Als je die schema's gewoon in de pagina plaatst i.p.v. in een iframe, heb je het hele probleem niet. Waarom moet het in een iframe?

[armageddon_2k1]

Boelie-Boelie schreef op woensdag 03 mei 2006 @ 14:00:
Als je die schema's gewoon in de pagina plaatst i.p.v. in een iframe, heb je het hele probleem niet. Waarom moet het in een iframe?

Het zijn interactieve (d.m.v. javascript) gecreeerde pagina's van een 3e partij die in een andere pagina geintregreerd moeten worden met alle functionaliteiten. Geloof me, ik heb geprobeerd het anders te doen, maar dit is het makkelijkst.

[Victor]

Zet op de parent elementen van het iframe ook height: 100%, waarbij je dit minimaal toepast op het HTML en het BODY element.

edit:
Voortaan lezen, had je dus al geprobeerd.

[ Voor 18% gewijzigd door Victor op 03-05-2006 17:15 ]

[Tsjilp]

Met JS de hoogte van de pagina (in het IFrame) opvragen (clientHeight) en deze toepassen op het IFrame?

[swiv98]

Ik heb hier recentelijk nog voor m'n werk naar gekeken.

Kort samengevat: in principe is het geen enkel probleem om een iframe met JavaScript qua hoogte aan te passen aan z'n content. Die scriptjes kan ik je zo geven en zijn trouwens ook makkelijk te vinden op internet.

Echter, als de inhoud van het iframe van een ander domein komt dat hetgeen er omheen staat (de context), dan krijg je te maken met het fenomeen: cross domain scripting.
Alle browsers leggen (begrijpelijk) beperkingen op aan scripts die trachten om middels javascript attributen te lezen en zetten in frames die elders gehost worden.
Al die eerder genoemde scriptjes werken dan ineens niet meer... Want stel je voor dat 'spam' in een iframe je URL van z'n parent zou kunnen veranderen. Of het window kon resizen. Liever niet nee.
Ook gesigneerde javascripts bieden geen uitkomst, want dat moet de gebruiker ook steeds bevestigen voor ze draaien.
Google maar eens op 'cross domain scripting'. Wordt alles duidelijk.

Conclusie: stay away from iframes! (tenzij je ze volledig binnen je eigen site gebruikt en host)

[armageddon_2k1]

Okee, enige uitleg over de situatie.
- We maken custom klantensites voor klanten van een bedrijf welke processen beschrijft.
- Deze processen kunnen geexporteerd worden naar HTML
- In deze HTML bestanden zitten mooie handige javascript functionaliteiten
- De HTML export staat op zichzelf en is een eigen site op zich
- Omdat het zo uitgebreid is willen sommige klanten andere layouts, structuren etc dan standaard in de HTML export
- We maken dan een custom site en roepen de benodigde html's op in iframe's. Elk proces heeft overigens z'n eigen html, en soms gaat het wel eens om 200 processen of iets dergelijks.
- Aan de structuur van de html's mag niks veranderen, ook de javascripts niet.
- De klantensite en de html-export staan allemaal op hetzelfde domein, maar dan in verschillende dirs, dus de site op http://server/klantA en de html-export op http://server/klantA/html

Ik zal eens zoeken op die scriptjes. Het ziet er nu namelijk niet uit...een dubbele scrollbalk a/d zijkant is lelijk.

[JHS]

En kan je wel iets doen met de CSS van die HTML exports ?

[swiv98]

Nee, dat ga je niet met CSS oplossen. Echt niet.

Maar ik ben (semi)blij om te horen dat je alle files zelf host. Dan kun je gewoon scripten.

Ik ben zelf gewend om het script in het iframe te zetten en te laten uitvoeren. Want anders moet je de context steeds laten controleren of de inhoud van het iframe al anders is geworden...
Kun je wel een javascript include toevoegen in je html? DMV een handige search/replace of zo?

Zie hier de code die je IN het frame kan gebruiken. Vervang 'myIframe' natuurlijk door de ID van het iframe dat je zelf gebruikt

JavaScript:

var y;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) {
    y = document.body.scrollHeight;
}
else {
    y = document.body.offsetHeight;
}
//set iframe height to our needed space, if present
var ourFrame = window.parent.document.getElementById('myIframe');
if (ourFrame) {
    ourFrame.style.height = y + "px";
}

Als het echt erbuiten moet blijven, dan zou ik bovenstaande omschrijven tot een functie (die niet van zichzelf maar van de document in de iframe de afmetingen leest) en die dan met een setInterval bv om de seconde aanroepen. Kun je zo intelligent maken als je zelf leuk vindt.

Code is trouwens naar voorbeeld van een van de vele scripts op www.quirksmode.org van Peter-Paul Koch. Een onmisbare bron voor web-dev!

[ Voor 3% gewijzigd door swiv98 op 05-05-2006 14:59 ]

[Verwijderd]

Wellicht niet de oplossing waar je naar op zoek bent, maar is het geen idee om de geëxporteerde html pagina's met php te parsen? Als de HTML een beetje ok is moet dat geen probleem vormen. Ik heb zelf zoiets gedaan met het rooster systeem van onze school.