<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Test!!!</h1>
<script onload="popup()">
function popup() {
console.log('popup function has been triggered!!!');
}
</script>
</body>
</html>
When the above page loads, I expect the onload attribute to cause function popup to fire but nothing happens. Where am I going wrong?
On an element, the load event fires if the element requires a resource, once that resource has loaded. This applies to, for example, images and <script> tags which use separate files. Inline JavaScript tags do not require the downloading of resources, so they don't fire the load event: so, the
<script onload="popup()">
doesn't invoke popup.
Just run popup() in the plain script body:
<script>
function popup() {
console.log('popup function has been triggered!!!');
}
popup();
</script>If you want to wait for the whole DOM to be loaded, use a DOMContentLoaded listener:
window.addEventListener('DOMContentLoaded', popup);
Execute a JavaScript immediately after a page has been loaded:
In HTML:
<body onload="console.log('popup function has been triggered!!!')">
In JavaScript:
window.onload = popup();
function popup()
{
console.log('popup function has been triggered!!!');
}
In JavaScript, using the addEventListener() method:
window.addEventListener('load', popup)
function popup()
{
console.log('popup function has been triggered!!!');
}
The onload isn't neccessary to kick off the function. I just needed to nonce it:
<script{%- if nonce %} nonce="{{ nonce }}"{% endif -%}>
(That's nunjucks BTW.)
You have to pass the onload attribute to the body, not the script tag.
==> <body onload=fnc>
Also, it would be good practice to add the defer attribute to your scripts tags so that they run after the DOM has loaded
onload works only if you are loading an element. script tag with inline function doesn't load anything. Even though moving it to the body works, it's not the right explanation here,
window.onload fires when "the page" has completed loading, which is when everything, all scripts, all images, all external resources have finished loading. If it's attached to a particular resource it fires when that resource has finished loading. I'm not even sure what it means when attached to the <body>, because if that's what you want you should be using the DOMContentLoaded event.
onload="popup()"event to body attributeonloadon a script tag works only when you're loading a resource. Since you are defining the function inline, it will not work here. You can either make it a self-initiating function or simply call it after the function definition.onloadhas its uses, but given your simple example it's probably the wrong thing to be considering. You may be looking at an old old old tutorial? It's usually better to use the DOMContentLoaded event as seen in this SO answer or load a script with defer.