Q&A: onload client-side event

Q&A: onload client-side event

  
Q: Can I use onload on a page?

A: Yes, you should place it on the the web screen extended properties.
Sometimes specific javascript code is built in an unescaped ServiceStudio expression. I've seen this a lot of times, but don't really have absolute sure if it is the best way or not. Onload is more advisable, right? It runs after the whole page is loaded... so one should use it in all cases, I guess. Can you comment on this?

Pedro
Hi Pedro,

the onload event occurs immediately after a page or an image is loaded. In case of a page, this means that all of the HTML DOM is rendered (all page elements) and available to use on the onload event handler. So, this makes it a much better candidate to put client-side behaviour running before user interaction with the page. I don't recall any special case where code should be put directly indide the <body> area and not on onload event handler.
Hi,

You may need to use unescaped expressions if you're using dynamic content in the script (for example, RefreshButton.Id + ".click()").

Regarding the onload handler, you also have 2 alternatives for controlling when the script will be executed:

1. use the defer attribute (<SCRIPT... DEFER>) - actually this will not use the onload event. Instead, it just instructs the browser to delay the execution of the script. Sounds vague? Yes. It's behavior can change from browser to browser, so it's not recommended.

2. attach your handler to the onload event - but don't destroy the previous handler. You can have various independent scripts needing to attach to the onload event. I've seen this on several scripts:

document.onload = MyFunction()

This will bind the onload event to MyFunction()... but if the onload event was already bounded to other action (for example, the one specified on the screen extended properties), it will destroy the previous association (last one wins).

One way of attaching various scripts to the onload event is presented below:

function registerEvent(obj, trigger, handler) {
if (obj.addEventListener) {
obj.addEventListener(trigger, handler, false);
}
else if (obj.attachEvent) {
obj.attachEvent('on' + trigger, handler);
}
else {
if (!obj['on' + trigger]) {
obj['on' + trigger] = function () {
if (!this[trigger + 'handlers']) {
return false;
}
for (var ix = 0; this[trigger + 'handlers'].length > ix; ix++) {
this[trigger + 'handlers'][ix]();
}
}
}
if (!obj[trigger + 'handlers']) {
obj[trigger + 'handlers'] = [];
}
obj[trigger + 'handlers'][obj[trigger + 'handlers'].length] = handler;
}
}

Example:

function PlanGrid_FireUpG1() { ... }

registerEvent(window, 'load', PlanGrid_FireUpG1);

Cheers,
Paulo Ramos
Hi Pedro,

If you use the onload, please remember that it may be delayed quite some time to be executed (only when the document is completely loaded), and if by any reason the end user clicks a link before the page finishes loading or if the user uses the stop button, the script is not executed.
Cheers,
Lúcio