locked
body onload not recommended for Metro apps? RRS feed

  • Question

  • I was porting a browser extension/app to Metro. The app used XmlHttpRequest and made use of it in the body onload() event, to fetch data and populate a drop down menu.

    It failed to work in Metro (as single view app) porting it as is. My current fix for it to make it work was to:

    add the following type of line under default.js under the block of code for "app.addEventListener("activated", function (args) {" where you perform app initialization steps.

    document.body.onload = jsFunctionName();

    I also had to move over some JS function code from its original file to default.js since I didn't know how to import JS code from another JS file within current JS file.

    So I got things working, but wanted to know the application initialization behavior in Metro apps on why porting as is would fail. And whether there is any use case for body onload() anymore for a Metro app.

    Saturday, November 10, 2012 5:03 AM

Answers

  • Hi,

    Body onload event is also supported in windows store app.

    For example,

    <body onload="document.getElementById('txt1').value = 'hello world';">

    But if there has winjs function, you'd better use the function I provide last reply.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Friday, November 16, 2012 9:03 AM
    Wednesday, November 14, 2012 1:54 AM

All replies

  • Hi,

    Try to using the code as follow:

    WinJS.UI.Pages.define("/options.html", {
       ready: function (element, options) {
           // everything in here works beautifully
       }
    });


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Monday, November 12, 2012 8:12 AM
  • Song, that would be for a page named options.html and not the main home.html page of the application right?

    Also, I know that would be the way to make it work. But my question post was about what isn't supported "as is" when porting a web app to Metro.

    It looks like body onload event is not supported and I just wanted to confirm that. And wanted some insight into the Metro HTML5/CSS/JS architecture on why that isn't supported.

    Most of the other JS functionality I use like onclick, onfocus, work fine as is, and XmlHttpRequest also works fine as is when ported. The only thing that broke was body onload.

    Wednesday, November 14, 2012 1:35 AM
  • Hi,

    Body onload event is also supported in windows store app.

    For example,

    <body onload="document.getElementById('txt1').value = 'hello world';">

    But if there has winjs function, you'd better use the function I provide last reply.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Friday, November 16, 2012 9:03 AM
    Wednesday, November 14, 2012 1:54 AM
  • I'm guessing body onload doesn't synchronize with the DOM load (time) as well as using the WinJS equivalents. So depending on when the DOM element used in body onload, like your example is loaded and ready in the DOM, it may or may not work.

    In my case, the onload event would execute JS to use xhr to get data to populate a drop down list, and the JS code was brought in from JS file via script tag w/ src attribute to path of JS file in Metro app. That same setup worked fine for web app as non-Metro app. But I had to move out the code into WinJS method to make it work when porting to Metro, otherwise the drop down list was never populated. And it also worked if I move the onload event from body tag to the drop down element itself as onfocus event (though it would populate onfocus instead). So that leads me to think body onload may execute too fast before DOM is ready or somehow not in sync compared to the WinJS equivalent.

    FYI, the reason I brought up this post is there may be other HTML5/CSS/JS Metro app developers who are novices/newbies that may encounter this same issue, so wanted to make a note of it for everyone to reference.

    Wednesday, November 14, 2012 6:41 AM