Asked  7 Months ago    Answers:  5   Viewed   28 times

I want to run a function when the page is loaded, but I don’t want to use it in the <body> tag.

I have a script that runs if I initialise it in the <body>, like this:

function codeAddress() {
  // code
}
<body onLoad="codeAddress()">

But I want to run it without the <body onload="codeAddress()"> and I have tried a lot of things, e.g. this:

window.onload = codeAddress;

But it is not working.

So how do I run it when the page is loaded?

 Answers

42

window.onload = codeAddress; should work - here's a demo, and the full code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>
Tuesday, June 1, 2021
 
danjah
answered 7 Months ago
51

You should write it like this:

window.onunload = goodBye;

Also, you might consider using the onbeforeunload event in some browsers:

window.onbeforeunload = goodBye;

When you write window.onunload = goodBye(); you assign whatever handler that is returned from goodBye to the unload event. Since nothing is returned, there will be no event handler. You need to reference the function instead: window.onunload = goodBye;

Friday, July 30, 2021
 
Blacksonic
answered 4 Months ago
32

Without jQuery, you can hook the open method to attach a listener for each XHR object's readystatechange events at the time the XHR object is opened. Ensure the following code runs before any Ajax occurs:

// save the real open
var oldOpen = XMLHttpRequest.prototype.open;

function onStateChange(event) {
    // fires on every readystatechange ever
    // use `this` to determine which XHR object fired the change event
}

XMLHttpRequest.prototype.open = function() {
    // when an XHR object is opened, add a listener for its readystatechange events
    this.addEventListener("readystatechange", onStateChange)

    // run the real `open`
    oldOpen.apply(this, arguments);
}

Alternatively, if you only care about successful load events, you can listener for that event instead of readystatechange.

Friday, August 13, 2021
 
jsuggs
answered 4 Months ago
34

You would have to use HTML entities to make it work:

<body onLoad="init('A sentence with &quot;quoted text&quot; as parameter')">

the much cleaner way, though, would be to assign the value in a separate <SCRIPT> part in the document's head.

...
<script>
body.onload = function() { init('A sentence with "quoted text" as parameter'); }
</script>
<body>
...

the onload event has the general downside that it is fired only when the document and all its assets (images, style sheets...) have been loaded. This is where the onDOMLoad event comes in: It fires when the core HTML structure is ready, and all elements are rendered. It is not uniformly supported across browsers, though, so all frameworks have their own implementation of it.

The jQuery version is called .ready().

Thursday, August 19, 2021
 
Whakkee
answered 4 Months ago
63

I'm posting another answer in case you can't implement the Master Page solution.

You could use a flag element to tell jQuery it's the homepage, because the URL solutions posted earlier can easily break.

Somewhere in your Homepage content, simply place this.

<span id="homepage-flag" style="display: none" />

And then using jQuery, check if the element exists and run your code. It's a pretty poor solution but it will work if you can't get my other answer to work.

if($("#homepage-flag").length > 0) {
    // run code for homepage
}
Monday, September 20, 2021
 
Drazisil
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share