[whatwg] Scripting Tweaks

Sat May 19 14:07:11 PDT 2007

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> 