Menu
Hi,
I have a question of using DOM and the defer property of the script tag to write content into a page after the brwoser render it and also to prevent the browser to stop to load the page because it needs to “wait” until get all the external js code.
EXTERNAL “TEST.JS” CODE:
obj106_1=document.getElementById(“test”)
if(typeof HTMLElement!=”undefined” && !HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
{
switch (where){
case ‘beforeBegin’:
this.parentNode.insertBefore(parsedNode,this)
break;
case ‘afterBegin’:
this.insertBefore(parsedNode,this.firstChild);
break;
case ‘beforeEnd’:
this.appendChild(parsedNode);
break;
case ‘afterEnd’:
if (this.nextSibling)
this.parentNode.insertBefore(parsedNode,this.nextSibling);
else this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}
HTMLElement.prototype.insertAdjacentText = function(where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
}
obj106_1.insertAdjacentHTML(“afterEnd”,'<script>alert(“a”)</script>’)
HTML CODE:
<HTML>
<HEAD>
<TITLE>Teste</TITLE>
</HEAD>
<BODY BGCOLOR=”white”>
Some text here
<span id=”test”><!–here the js will write content –></span>
<script src=”test.js” defer></script>
</body>
</html>
So using this i can write HTML content, images, texts, formated texts after the page load, but if i try to write other JS content to execute a simple alert command for example it does not work, dont give error but also dont work, i think this is why the defer propertie works. Try to write the script tags just like Abhi suggests does not work also.
Whether the browser should proceed with rendering regular HTML content without looking for the script to generate content as the page loads. This value needs to be set in the SCRIPT element’s tag at run-time. When this property is set to true by the addition of the DEFER attribute to the tag, the browser does not have to hold up rendering further HTML content to parse the content of the SCRIPT element in search of document.write( ) statements. Changing this property’s value after the document loads does not affect the performance of the script or browser.
So how to write DHTML code using this?
Why i want this? I use it to make the page load and render faster, because if you dont use defer and the script is “big” or get a timeout, the browser will “wait” until get the JS to finish render the page, using defer it does it just after the page load, so this is why i write the HTML content after that….
But… how to write other js , even a simple one like an alert or a DHTML content? Defer is the only way to make the browser load the main js file after the page load, so i will use the function inside that JS to write content on that span “test” and there i wish to place DHTML or js, how to do that?
Onload event Doesnt work just because the point is use “defer” property of the script tag. Onload loads a function after the page loads, yes, but the point is, the main external js file that have the main function to write the content and the content to be write should be loaded after the page load, onload cant so that!
For example, try to create a js file with “500kb”, include it without defer… then load the page, you’ll see that it will wait until the js to be downloaded 100% to finish render the page.
If you use “defer”, it will download the js after render the page.
So that moment i want to write the content as explained on the messages before using the JS DOM …. HTML content no problem to be write after… but not for JS or DHTML content.
Thanks in advance!
Ryu