Window.onloadwithout waiting for theDOMto start processing

It – Hardware & Software | | 2 views

Without waiting for window.onload, DOM processing is started
Recently, the kind of scene which constructs the page and element in the JavaScript+DOM base, seems that little by little increases, but inside HEAD of the page the DOM element as for createElement it being possible, that, it is not possible to add and to insert to the node below document.body which does not exist yet and.

For example, trying to make the red letter indicate, “test”, many measures do, you think that either the one that is not less, as description below you wrote the cord/code, were not visited in error, did not operate.

This error< before> the object of document.body is formed by the body tag, document.body.appendChild (ele) occurs with the consequence which does.

-> Sample test1.htm (it is not setting where error is indicated, nothing happens,)
<html> <head> <script type = “text/javascript”> <! — var ele = document.createElement (‘DIV’); ele.setAttribute(‘id’,'testDIV’); ele.setAttribute(‘width’,’200′); ele.style.color = ‘red’ ele.innerHTML=”test”; document.body .appendChild(ele); / error here /–> </script> </head> <body> bodystarting position of the element </body> </html>

there, <body onload=”processing”>orwindow.onload=using a process, wait for the completion of construction from pageDOMbegin processing the work of the, it is generally performed comparatively.

or, HEADgive up to write a script in theBODYapart and into the write a script of several, outlook as well as cases that became bad the eyes often.

for example,, window.onloador<body onload=”processing”>that it is processing with, the following code will look like.

sample test3.htm
<html> <head> <script type = “text/javascript”> <!– window.onload = function (){ var ele = document.createElement(‘DIV’); ele.setAttribute(‘id’,'testDIV’); ele.setAttribute(‘width’,’200′); ele.style.color = ‘red’ ele.innerHTML=”test”; document.body .appendChild(ele); / it is not an error } /–> </script> </head> <body> bodystarting position of the element </body> </html>

sample test4.htm
<html> <head> <script type = “text/javascript”> <!– function loaded(){ var ele = document.createElement(‘DIV’); ele.setAttribute(‘id’,'testDIV’); ele.setAttribute(‘width’,’200′); ele.style.color = ‘red’ ele.innerHTML=”test”; document.body .appendChild(ele); / it is not an error } /–> </script> <body onload=”loaded()”> bodystarting position of the element </head> </body> </html>
these, either after the page is completely loadedDOMsince the start of processing of is not, at that time, of course, document.bodyare present, there is no error to be a.

but, that the page is finished loading, in the page after reading the letter and picture all because it is, wait for itDOMthey began work on the building and it is, latency seems to be wasted by any stretch of the imagination is the mind.

it should be noted especially, for example,, such as the page is pasted sheets of what the big picture. while reading them, will be the script that would sit down without doing anything. if such a thing much to be, easily<body>should i move the.

for those of you who still can not give up, the following, in the script(forcibly)is a way to somehow.

next page

window.onloadwithout waiting for theDOMto start processing
although, i should say before you introduce, this is, HTMLorXHTMLmore is not better behaved in a way. but, while providing the performance to the user, the script on the management alsoBODYin such cases you want is an effective separation from.

the following sample, <body>how to move the starting position of the element, reproduces in the script. there are a variety of ways, anyway, getElementsByTagNameusing the methodBODYconfirmed the presence of, try a method that must be added.

sample test5.htm
<html> <head> <script type = “text/javascript”> <!– if(document.getElementsByTagName(‘BODY’).length==0) document.write(‘ <body> ‘);/ of dummybodytag output var ele = document.createElement(‘DIV’); ele.setAttribute(‘id’,'testDIV’); ele.setAttribute(‘width’,’200′); ele.style.color = ‘red’ ele.innerHTML=”test”; document.body .appendChild(ele); / it is not an error /–> </script> </head> <body> bodystarting position of the element </body> </html>

tentatively, this sampleW3Cof validation service mark Markup Validation Servicev0.7.2 why do not you modified so as to pass through the( test5.htm ), This Page Is Valid XHTML 1.0 Strict! stamp of approval, but was available, well, please think and jokes. this methodW3Cis that it is not legal to clear(simply, if, this problem will probably disappear if many parts of the script to be generated by more).

(tentatively, but just to be sure, and put a check, HTML Validation Results but, Congratulations, no errors! in, of keio Another HTML-lint isW3Ctentatively is still a little tougher than well done will be to. )

now, this sample is, DOMthe majority of recent browsers that implement the, will work well. simply, still syntactically, 2heavyBODYyou care is. in, in this case, whichBODYwhat element is valid?

let’s try a little.

sample test6.htm
<html> <head> <script type = “text/javascript”> <!– alert(’1::’+document.getElementsByTagName(‘BODY’).length) if(document.getElementsByTagName(‘BODY’).length==0) document.write(‘<body>’);/of dummybodytag output var ele = document.createElement(‘DIV’); ele.setAttribute(‘id’,'testDIV’); ele.setAttribute(‘width’,’200′); ele.style.color = ‘red’ ele.innerHTML=”test”; document.body.appendChild(ele); / it is not an error alert(’2::’+document.getElementsByTagName(‘BODY’).length) /–> </script> </head> <body onload=” alert(‘onload::’+document.getElementsByTagName(‘BODY’).length) “> </body> <script type = “text/javascript”> <!– alert(’3::’+document.getElementsByTagName(‘BODY’).length) /–> </script> </html> result(Win e6,e7b,f1.5,o8,o9b, Mac s1.24,s2,e5, Linux k3) 1::0 2::1 3::1 onload::1 that is, of dummybodythe tagsdocument.writeat the time of the, BODYobject is created, then, HTMLwritten inBODYeven if the appearance is, the object is1does not increase the number of remains.

in short, in this case, the firstBODYit is only valid.

but, BODYin the tagonloadthere is another event management, the first dummyBODYif you have not written in the, HTMLwritten inBODYinonloadis enabled(onloadwhen it was written to both moth, the firstBODYwhat is valid in the, dummy destinationBODYwhen they write in the, HTMLi wrote back inBODYthat is those in the disabled care must be taken. )

at the end, if(document.getElementsByTagName(‘BODY’).length==0)document.write(‘<body>’);easier than, here are some similar writing. if(document.body==null)document.write(‘<body>’); if(!document.body)document.write(‘<body>’); document.body||document.write(‘<body>’); document.write((document.body)?”:’<body>’); either way, as well, at the time of the scripting processBODYif there is no tag, i shook occasionally.


Additional items from "It – Hardware & Software"