1

The problem is simple, but can't figure out a solution. Many thanks for those who helps. I want to modify a web page (DOM tree) before it is displayed on screen. I understand that the DOM tree is fully loaded in memory before being processed.

Do any of you knows a way to process this fully loaded DOM tree while it is on memory and then let it be displayed with its new structure ?

The reason i want to do that, is because i'm working on an addon that is adding content to an existing web site.

added-> Just need to mention that the existing web site is not mine, so i can't use php to modify the website content is not mine.

But right now, the web site is displayed without the addon content and you see the content coming after 1 second (because i append the content after website is already displayed), so you see the website content moving.

Thanks for helping.

developerGuile
  • 507
  • 2
  • 11
  • 20
  • I think i'll modify the DOM received 'client side' through the addon since it'll be faster than waiting for server to make the changes. – developerGuile Nov 15 '10 at 19:55

4 Answers4

4

It's not very difficult. Just hide the body using CSS and on the onload-event of the document do your manipulation and show the body.

Short example:

<html>
<head>
<title>example</title>
<style type="text/css">
<!--
html.scripted body{display:none;}
-->
</style>
<script type="text/javascript">
<!--
//set class for html-element, so the css-rule above will be applied to the body
document.getElementsByTagName('html')[0].className='scripted';

//on page load
window.onload=function()
{
  //do the manipulation
  document.body.appendChild(document.createElement('em')).appendChild(document.createTextNode('dynamic content'));
  alert('manipulation done');

  //show the body
  document.body.style.display='block';
}
//-->
</script>
</head>
<body>
static content
</body>
</html>

In regard to Brad's comment below you may consider if there may be other ways. As the real issue seems to be the moving content, it could be possible to place a static placeholder where the dynamic content will appear later.

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Please don't do this. Browsers render pages progressively. There is no reason to hide a partial page from your users. Dial-up users will especially hate you, as they often browse pages long before they finish loading. – Brad Nov 15 '10 at 16:47
1

You mention PHP in your tags, so why not build your document server-side? Then, it doesn't matter.

If you must do this client side, then I also wouldn't worry about this. Web pages are rendered progressively anyway. Maybe you have a fast computer and a quick connection to your servers, but I guarantee you that most of your users do not.

Just add some code to the bit where the DOM is ready to make your page enhancements. Relevant: Javascript DOM ready without an entire framework

Community
  • 1
  • 1
Brad
  • 159,648
  • 54
  • 349
  • 530
0

The only way to manipulate the DOM before it's loaded is by using a pre-processor like php.

Javascript can only manipulate the DOM after it's loaded.

For any further help beyond that you would have to provide a more specific example :-)

wajiw
  • 12,239
  • 17
  • 54
  • 73
0

I finally found a solution.

I make the addon looking at web page navigation. In fact, it looks at url changes so that I know the user is moving to a different location (therefore I know I have to do something before I even got the 'Load' event of the web page).

Then I just try to access an element (that I know will be in the DOM, like the header) using a loop. Then when the element appears (before the 'Load' event) I insert the code and stop looping/listening.

If anyone need more details of how it is all done, I'll gladly answer your question.

Thanks.

developerGuile
  • 507
  • 2
  • 11
  • 20