27

Is it allowed to use <body onLoad="myfunc()"> along with jQuery's document.ready() handlers? I can't find a way to achieve the same functionality of the <body onLoad> with jQuery.

An example of a use case would be a facebook application. An Iframe facebook app requires the use of the FB.Canvas.setSize function which resize the iframe.

I would need to fire it up only when all elements on the page are finished loading.

Vogel612
  • 5,620
  • 5
  • 48
  • 73
Joel
  • 5,949
  • 12
  • 42
  • 58

6 Answers6

37

$(window).load(myfunc) is what you're looking for. If you're working with the load event of an iframe, you can replace window with the iframe element/selector.

Kevin
  • 3,771
  • 2
  • 31
  • 40
  • In case I create the iFrame dynamically later on, it seems like it is not possible to use .live() and load.. is there any solution for that? – Joel Jan 09 '11 at 08:26
  • 1
    After creating the iframe (e.g. `var iframe = document.createElement('iframe');`), you can pass it a load event callback with `$(iframe).load(myfunc);`. I would recommend doing this before attaching it to the DOM and/or setting its `src` attribute. – Kevin Jan 09 '11 at 08:28
  • I tried using both $(window).load(FB.Canvas.setSize()) and jQuery(document).loadFB.Canvas.setSize()) . However, none of them resize the window as opposed to using which does the job. It seems like they act differently – Joel Jan 09 '11 at 08:36
  • Neither of those would work. You want something like this: `$(iframe).load(function() { FB.Canvas.setSize(); });` If this still doesn't work, please edit your original question and provide more code/context. – Kevin Jan 09 '11 at 08:40
  • The problem is that I do not have control over the iFrame creation. It is made by facebook (using XFBML). Therefore, I can not pass it a load event callback. – Joel Jan 09 '11 at 08:45
  • 2
    Understood. You can attach the load event callback to the window before creating the iframe: `$(window).load(function() { FB.Canvas.setSize(); }); // then create iframe` – Kevin Jan 09 '11 at 08:49
  • Is it possible to use replace the window with `functionExample`? So `functionNewExample` runs if `functionExample` has been completed? – alejnavab Dec 20 '16 at 11:08
7

This works as well:

$(window).load(function(){
    // ..
    myfunc();
    // ..
});
Nikola K.
  • 7,093
  • 13
  • 31
  • 39
putude
  • 79
  • 1
  • 1
6

.load(), .unload() or .error() are deprecated since jQuery 1.8. Lookup for these aliases in your code and replace them with the .on() method instead

$(window).on('load', function(){...})
Vitalicus
  • 1,188
  • 13
  • 15
  • 1
    Link to deprecated [load event](https://api.jquery.com/load-event/). – Osmund Francis Apr 24 '21 at 20:14
  • 1
    Link to JQuery 3.0+ AJAX short-hand [method called load()](https://api.jquery.com/load/); readers should be aware of the difference when looking at their code (and resulting errors). – Osmund Francis Apr 24 '21 at 20:31
5

From the jQuery API on the ready handler:

The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

sgriffinusa
  • 4,203
  • 1
  • 25
  • 26
1

Found this thread updating some old code that had <body onload="someFunc()"> so to give an updated answer:

Don't use load(). While $(document).ready(function(){...}); should work (depending on your use case) you actually want: $(window).on('load', function(){...}); to more closely mimic <body onload="...">

Some threads suggest this has been deprecated since jQuery 1.8 (as well as .unload() and .error()) and should be replaced with proper .on() implementations. I've confirmed that using load() on 3.3.1 results in an error, namely: indexOf is not a function in jquery.min.js

Documentation For jQuery's onEvent Handler

NekoKikoushi
  • 496
  • 5
  • 16
  • 1
    I thought `$(window).on('load', function () {...})` was the same thing as `$(window).load(function() {...})`. Are they not? – Jarad Feb 09 '21 at 00:35
  • Well they function similarly, however load() & on() are indeed two different & unique functions. I was just cautioning that I had found some sources stating the 'load'/'unload' were being phased out in favor of the more flexible 'on' function. – NekoKikoushi Feb 09 '21 at 04:15
0

Try load():

jQuery(document).load(myfunc)
kapa
  • 77,694
  • 21
  • 158
  • 175
Andrey
  • 20,487
  • 26
  • 108
  • 176