Login/Register
Hook a javascript event to page load
Asked Answered
Solved javascriptmaster-pagesasp.netonload-event
L

5

27

I have an aspx that has the following javascript function being ran during the onload event of the body.

<body onload="startClock();">

However, I'm setting the aspx up to use a master page, so the body tag doesn't exist in the aspx anymore. How do I go about registering the startClock function to run when the page is hit and still have it use a masterpage?

Lowelllowenstein answered 3/6, 2009 at 18:57 Comment(0)
S
43

If you don't want to explicitly assign window.onload or use a framework, consider:

<script type="text/javascript">
function startClock(){
    //do onload work
}
if(window.addEventListener) {
    window.addEventListener('load',startClock,false); //W3C
} else {
    window.attachEvent('onload',startClock); //IE
}
</script>

http://www.quirksmode.org/js/events_advanced.html

Stab answered 3/6, 2009 at 19:30 Comment(8)
+1 - I was too lazy to type this answer, but this is the way I would suggest someone does it too, with the same assumptions you initially state. – Lambency
Of course, I would abstract the details a wee bit - hopefully that is obvious to the OP... – Lambency
I must be missing something real obvious here, but where does the 'if' block of code go? You can't just dump that in a <script> tag can you? – Lowelllowenstein
You can stick it all in a script tag. I updated my answer to reflect it. This will force the 'if' logic to execute as the script is parsed so the startClock event is ready onload. – Stab
Easy and slick way to do it. Thanks. – Lowelllowenstein
What if document.attachEvent is null? – Oat
Since non-MS browsers are pretty good about implementing W3C DOM Level 2 recommendations, the 'else' exists for IE only. As Jason mentioned, we could(should) abstract the details and while we're at it we could add caution(is this a browser that doesn't support either event reg. model, is this function already registered, etc). I opted for simplicity in my example. Worth a downvote? I dunno. – Stab
In Chrome, document.addEventListener didn't work, but window.addEventListener did. – Eileen
D
2

Insert this anywhere in the body of the page:

<script type="text/javascript">
window.onload = function(){
    //do something here
}
</script>
Delila answered 3/6, 2009 at 19:2 Comment(2)
The only problem with this one is if other code, also pulled into the composite page, does the same thing - last in wins. Redefining window.onload works, but care should be taken to make sure it hasn't already been defined! – Lambency
I have seen code that tests to see if window.onload is defined, and if so, refers to it in a temp variable, then "calls" that variable from within the new window.onload. – Pelvis
M
1

The cleanest way is using a javascript framework like jQuery. In jQuery you could define the on-load function in the following way:

$(function() {
    // ...
});

Or, if you don't like the short $(); style:

$(document).ready(function() {
    // ...
});
Mook answered 10/5, 2010 at 7:25 Comment(3)
Agreed. I've actually started using jQuery a few months after posting this question (nearly a year ago now), and I love it. – Lowelllowenstein
Newer versions of jQuery require the $(document).ready(...) style. – Yoga
No. In never versions the behaviour of $() changed, but $(some_function) did not change. – Mook
A
1
window.addEventListener("load", function() {
    startClock();
});

This will invoke the startClock function at page load.

Annorah answered 6/3, 2019 at 11:56 Comment(2)
Nice, just don't forget to add ");" after the "}" – Ellora
Thanks for pointing that out @JulienVan. Have edited it. – Annorah
P
0
Page.ClientScriptManager.RegisterStartupScrip(this.GetType(), "startup", "startClock();", true);

or using prototype

document.observe("dom:loaded", function() {
  // code here
});
Pogey answered 3/6, 2009 at 19:3 Comment(1)
I assume you mean RegisterClientScriptBlock? – Delorsedelos

© 2022 - 2024 — McMap. All rights reserved.