On Saturday, May 19, 2007 1:37 AM liorean wrote:
True, but what is wanted by scripters isn't that it triggers before
any rendering takes place at all, what is wanted by scripters is to
not have to wait for external content to load, in difference to the
load event. The important factors are that the DOM is not incomplete
and that it takes place as soon as possible, not that rendering hasn't
started - because most often it's wanted specifically for DOM
manipulation.
I think I have been bumping into a question of just this sort recently.
Let me explain first and then attach code later.
I got interested in testing some cross-browser idiosyncracies with
document.write.
Why I was doing this is a long story, but anyhow I came up with a series of
12-18 test cases trying to figure out what was a bug in an app, what was
unclear in the specs and then to see if I could figure out what WHATWG said
about the issue.
Anyhow, I wanted to consolidate all my cases into one central page. I
thought I'd load each of the pages into an <iframe> of the central page, and
upon loading of each of the individual files, display their source code in a
separate text area, leave the running version displayed in the embed and
then leave another textarea where I could scribble my notes about the
performance of each file in various browsers.
It seemed like a sensible sort of approach. Unfortunately, I could not seem
to detect the load event associated with the documents inside the iframes. I
could also not assign an onload event to the DOM's inside those iframes
since the DOM's didn't yet exist (at least in one or two of the browsers I
was testing). So instead I put stuff inside a window.setTimeout to wait
until all the little docs inside each of the iframes had properly built some
sort of a DOM. Unfortunately, Firefox seems to build the DOM incrementally,
while IE and Opera build it all at once. If you plug in a few real file
names into the textarea at the end of the following and you can see what I
mean. If it makes more sense I can put it on a server so you can see it in
situ.
Opera and IE are happy with the approach, but FF gives me a partial DOM:
<head></head><body></body> rather than the full innerHTML -- I could
serialize, but yuck -- this was meant to be quick and dirty.
The actual story associated with the tests involved is sorta interesting, so
I'd like to get this working since it provides a framework for telling yet
another story.
cheers,
David
{Oh and apologies, since my use of tables here may not be utterly proper --
they may be presentational rather than semantic (maybe I don't understand
the difference) -- it just seemed a heck of a lot easier to do it this way.}
<html>
<head>
<title>Docwrite tests</title>
<script>
Dcols=new Array("#8ff","#f8f","#ff8")
Tcols=new Array("#eff","#fef","#ffe")
var T=null
function getfiles(){
T=document.f.t.value.split("\n")
tab=document.getElementById("t")
var tn=3
var C=new Array(2)
for (i in T){
var R=document.createElement("tr")
for (var j=0;j<2;j++){
C[j]=document.createElement("td")
R.appendChild(C[j])
}
for (var j=0;j<tn;j++){
var DV=document.createElement("div")
if (j==0) DV.innerHTML="Case "+i+":"+T[i]
else{
var TA=document.createElement("textarea")
TA.setAttribute("cols","45")
TA.setAttribute("rows",7-2*j)
TA.style.background=Tcols[j]
DV.appendChild(TA)
}
C[0].appendChild(DV)
DV.style.background=Tcols[j]
}
var I=document.createElement("iframe")
I.setAttribute("width",300)
I.setAttribute("height",120)
I.setAttribute("src",T[i])
I.setAttribute("id", i)
C[1].appendChild(I)
tab.firstChild.appendChild(R)
}
ready()
}
function ready(){
var TRS=document.getElementsByTagName("tr")
count=0
for (i=0;i<T.length;i++){
try{
Q=window.frames[i].document.body.nodeName
count++
}
catch(err){}
}
if (count==T.length) doit()
else window.setTimeout("ready()",100)
}
function doit(){
var TRS=document.getElementsByTagName("textarea")
for (i=0;i<T.length;i++){
TRS[2*i].value=window.frames[i].document.documentElement.innerHTML
}
}
</script>
</head>
<body onload="getfiles()">
<input type=button onclick="doit()" value="doit()">
<table id="t" border=1><tbody></tbody></table>
<form name="f"><textarea name="t">docwriteFunction.html
docwriteStyle.html
docwriteStyle2.html
docwriteStyle3.html
docwriteStyle4.html
docwriteStyle4a.html
docwriteStyle4b.html
docwriteStyle4c.html
docwriteStyle4d.html
docwriteStyle4e.html
docwriteStyle5.html
docwriteStyle5a.html
docwriteStyle5b.html
docwriteStyle5c.html
docwriteStyle5d.html
docwriteStyle5e.html
docwriteStyle5f.html
docwriteStyle5g.html
docwriteStyle5h.html</textarea></form>
</body>
</html>
