[W3C/JavaScript] iFrame onLoad error - Softwareontwikkeling

maandag 18 april 2005 19:36

Acties:

Verwijderd

Topicstarter

In een CMS systeem parsen we een iframe die dus externe data ophaalt van de server. Omdat de height variabel is, maken we gebruik van de volgende javascript code:

code:

<script language="JavaScript" type="text/Javascript">
    function iFrameHeight() {
        if(document.getElementById && !(document.all)) {
            var h = document.getElementById('blockrandom').contentDocument.body.scrollHeight;
            document.getElementById('blockrandom').style.height = h;
        }
        else if(document.all) {
            h = document.frames('blockrandom').document.body.scrollHeight;
            document.all.blockrandom.style.height = h;
        }
    }
</script>

Deze code moet uitgevoerd worden op het moment dat de iframe geladen wordt.

code:

1
2
3

<iframe src="nietrelevant.php" width="500" id="blockrandom" onload="iFrameHeight();" scrolling="no" frameborder="0">
Uw browser ondersteunt geen iframes. Klik <a href="nietrelevant.php" target="_blank">hier</a>om de pagina te openen die geladen moest worden.
</iframe>

Dit alles werkt prima, zowel in IE als in FF. Maar nu wil het dat W3C het er niet mee eens is dat we onLoad gebruiken in een iframe.

Below are the results of attempting to parse this document with an SGML parser.

Line 112, column 236: there is no attribute "ONLOAD"

... width='500' id="blockrandom" onload="iFrameHeight();" scrolling="no" framebo

Normaal zou ik zeggen, ach pech, maar dit is de enige error, dus die zou ik er toch graag uit zien.

Mijn javascript kennis gaat niet bijzonder ver alleen, helaas. Enige hulp zou geweldig zijn

maandag 18 april 2005 19:39

Acties:

Michali

Je kunt hem er dynamisch aan koppelen:

JavaScript:

1	document.getElementById('blockrandom').onload = iFrameHeight;

Uiteraard wel te doen nadat de iframe is geplaatst.

Noushka's Magnificent Dream | Unity

maandag 18 april 2005 19:44

Acties:

gorgi_19

Kruimeltjes zijn weer op :9

Clientside zaken horen thuis in Webdesign & Graphics

>> Webdesign & Graphics

Digitaal onderwijsmateriaal, leermateriaal voor hbo

maandag 18 april 2005 20:00

Acties:

faabman

quote: http://www.w3.org/TR/REC-...act/scripts.html#h-18.2.3
onload = script [CT]
The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.

lijkt me dat je dus een

code:

1	document.getElementById('blockrandom').contentWindow.onload

moet toepassen...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

maandag 18 april 2005 20:22

Acties:

Verwijderd

Topicstarter

Michali schreef op maandag 18 april 2005 @ 19:39:
Je kunt hem er dynamisch aan koppelen:
JavaScript:
1
document.getElementById('blockrandom').onload = iFrameHeight;
Uiteraard wel te doen nadat de iframe is geplaatst.

Het is nu aangepast. Werkt prima in IE, maar in FF gebeurt er niets, tenzij het doctype wordt gewijzigd in:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Dan werkt het zowel in FF als in IE.

Het stomme is, dat dit de CSS van onze pagina door de war schopt. Terwijl het perfect werkt met

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Is dit nu een fout in onze CSS, of is er een workaround voor?

dinsdag 19 april 2005 10:59

Acties:

Verwijderd

Topicstarter

Met een nieuw stuk javascript heb ik het voor elkaar dat het werkt in zowel FF als in IE. Maar het lijkt erop dat de .load functie of .onload niet hetzelfde werkt als onLoad= in de html tag.

Als er geklikt wordt op een link binnen de iframe wordt die pagina ook geopend in de iframe. So far so good. Alleen deze pagina kan dus verschillen in heigth met de vorige pagina. Met onLoad wordt dit keurig opgevangen, maar met de javascript functie niet.

Hoe is dit op te lossen? Ik het nu tijdelijk opgelost met een mousemove, maar dat is wel erg goedkoop

code:

var iframeids=["blockrandom"]

var getFFVersion    = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight   = getFFVersion>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function startdyncode(){
    dyniframesize()
}

function dyniframesize() {
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
        if (document.getElementById){ //begin resizing iframe procedure
            dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
            if (dyniframe[i] && !window.opera){
                dyniframe[i].style.display="block"
                if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
                    dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight; 
                else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
                    dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
            }
        }
    }
}

if (window.addEventListener)
    window.addEventListener("load", startdyncode, false)
else if (window.attachEvent)
    window.attachEvent("onload", startdyncode)
    
document.onmousemove = startdyncode;

dinsdag 19 april 2005 12:23

Acties:

sopsop

[v] [;,,;] [v]

Kun je het resizen van dat Iframe niet vanuit de pagina in dat iframe doen? Dus dat je het in de body onload van de pagina die in de src van het iframe staat zet? Dat is sowieso W3C Valid.

dinsdag 19 april 2005 12:34

Acties:

SchizoDuckie

Kwaak

boppert schreef op dinsdag 19 april 2005 @ 12:23:
Kun je het resizen van dat Iframe niet vanuit de pagina in dat iframe doen? Dus dat je het in de body onload van de pagina die in de src van het iframe staat zet? Dat is sowieso W3C Valid.

zo moet dat ook, want anders gaat het niet werken

je hebt namelijk toch de body.scrollHeight nodig van de iframe page

Bij de weg: mocht je problemen krijgen met een crashende firefox, fruts even een setTimeout tussen je onload en het versturen van de variabele. Scheelde voor mij een hoop

Stop uploading passwords to Github!

dinsdag 19 april 2005 12:47

Acties:

Verwijderd

Topicstarter

Ik denk niet dat dat helemaal de oplossing is. Aangezien de iframe source niet altijd hetzelfde is. Dat zou dus betekenen dat je alle source pagina's moet gaan aanpassen, in plaats van eenmalig in de index.html file.

Het is nu als volgt:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Website</title>
</head>

<body>
<script type="text/javascript" src="includes/resize.iframe.js">
<iframe src="signup.html" width="500" id="blockrandom" scrolling="no" frameborder="0">Uw browser ondersteunt geen iframes. Klik <a href="signup.html" target="_blank">hier</a> om de pagina te openen die geladen moest worden.</iframe>
</body>

</html>

Wat prima werkt. Behalve bij het klikken op een link binnen de iframe. Met onload wordt het bijgewerkt, met javascript functies niet. Dan blijft de eerste grootte behouden. Bij elke reload van de iframe zou die functie uitgevoerd moeten worden.