Safari JavaScript Page Load Issues

In a couple of recent web projects I've run into difficulty dynamically generating JavaScript to be run when a web page loads. The added difficulty was figuring out a consistent behaviour that worked across various browsers: Explorer, FireFox, Safari. I found that Safari was the most temperamental. Here are the different approaches I took and how each approach turned out.

Through this exercise I had the following issues:

• Entirely blank page in Safari when other browsers rendered the site perfectly
• Random behaviour of the desired JavaScript working and not working

There are three approaches to creating dynamic JavaScript that you might be familiar with:

• body onload="init();" - with the init function handling your startup script
• .NET 2.0 has a method: ClientScriptManager.RegisterStartupScript Method (Type, Key, Script)
• Runtime inline server-side variable (ie. %=ScriptVar% or {PARAMETER})

Approved Method:
Use the third option!
In your server-side code do the following...

• Declare a Public variable as a string.
• Fill that string with your JavaScript.
• Output that variable to your html by adding in to your page where ever you want. For a startup script add the script right above the closing HTML tag. It should be the very last thing on your page before /html.

Frustrations Along the Way:

• Using an onload function for the body tag still requires that you dynamically add a script block to your page by doing something similar to the approved method above. Also, various browsers behave differently in this case - if your function is triggered before the page loads entirely your JavaScript may reference elements that are not on the page yet.
• The .NET 2.0 method... ClientScriptManager.RegisterStartupScript Method (Type, Key, Script) (MSDN for more info). This works great in IE, but that's about it. This method will collect all the script you want - including across master pages and user controls - and then write the script to the html output. The problem is that the script is written just before the /form tag. Safari basically ignores the code in this location.

Final Thoughts...

Adding your dynamically generated JavaScript to a server side variable is the way to go. Building your script as a server variable might be more cumbersome than the .NET methods that allow for easier creation of script blocks. However, the .NET methods do not give you any control over when and where the script blocks are rendered to the page.