Attach a Body Onload Event With Js

Add event handler for body.onload by Javascript within <body> part

As we were already using jQuery for a graphical eye-candy feature we ended up using this. A code like

$(document).ready(function() {
// any code goes here
init();
});

did everything we wanted and cares about browser incompatibilities at its own.

Attach a body onload event with JS

This takes advantage of DOMContentLoaded - which fires before onload - but allows you to stick in all your unobtrusiveness...

window.onload - Dean Edwards - The blog post talks more about it - and here is the complete code copied from the comments of that same blog.

// Dean Edwards/Matthias Miller/John Resig

function init() {
// quit if this function has already been called
if (arguments.callee.done) return;

// flag this function so we don't do the same thing twice
arguments.callee.done = true;

// kill the timer
if (_timer) clearInterval(_timer);

// do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;

Body Onload Event

  1. There is no body.onload. When you attach the event in the HTML code, it actually attaches to window.onload. So that's the one you should use.
  2. It only fires when all the resources (images, scripts, css files, etc.) have fully loaded.
  3. If there is another script which also tries to attach to the event (and almost all javascript frameworks do, like jQuery, ExtJS, etc.), then you might get a conflict there. Better attach to the event through the framework;
  4. How do you attach it? Maybe you attach the event handler too late, when the page is already loaded.

How to add onload event to a div element

No, you can't. The easiest way to make it work would be to put the function call directly after the element

Example:

...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...

or - even better - just in front of </body>:

...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>

...so it doesn't block the following content from loading.

Body onload function in JavaScript

This might what you're looking for: Attach a body onload event with JS

I'd suggest using jQuery or some other JavaScript framework unless you're exploring JS or have some stringent restrictions on using libraries and frameworks.

body onload event after click on link

You can achieve this by using hashtags in the URL, your link HTML:

<a href="demo.php#noCall">click</a>

The demo.php javascript:

<script type="text/javascript">
window.onload = function() {
if (document.location.href.indexOf("#noCall") == -1) { //Does the hashtag NOT exist in the URL?
alert("Event called when link is not clicked"); //Event called
window.location.hash = ''; //Remove noCall from the hash for page-reload
}
};
</script>

add script to head that runs after the body has been loaded

You can use global load event

<script>
onload = _ =>
document.querySelectorAll("a").forEach(elem => elem.classList.add("codetext"))
</script>

will HTML <body> onLoad events overwrite javascript window onload event?

Depends on browser. window.onload currently overwrites body onload in Chrome, Firefox and Safari on OSX

You can ADD your function to the onload:

window.onload = function() {  alert('window.onload')}
if (window.addEventListener) { window.addEventListener('load', function() { alert('addEventListener') }, false);} else if (window.attachEvent) { // IE < 9 window.attachEvent('onload', function() { alert('attachEvent') });}
<body onload="alert('body onload')">
</body>

Insert javascript call inside <body onLoad=function()> in RAILS

You do not need to modify the body tag to associate a Javascript function with onload. Instead of using the onload attribute on the body, you can assign the function to window.onload inside an external Javascript file.

There are more advanced ways, using event listeners to do the same thing (trigger the function on page load) which would allow to add several listener functions or trigger functions on DOM ready, a little/some time before page load. Just setting window.onload is the most simple way, and will keep your Javascript unobtrusive.



Related Topics



Leave a reply



Submit