- From: ddailey <ddailey@zoominternet.net>
- Date: Sat, 19 May 2007 17:07:11 -0400
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>
Received on Saturday, 19 May 2007 14:07:11 UTC