CODEWITHSUNDEEP
javascriptandroidandroid-webview
Princess Ruthie
Princess Ruthie

Reputation: 50

window.onload doesn't work within Android WebView

I'm working on an issue for the 2048 game which is a webapp that's been ported to Android:

https://github.com/uberspot/2048-android/issues/15

The JavaScript seems to work everywhere except for a button that toggles a style change in the app. The JavaScript works in a browser, just not in the app. I think it comes down to some code in nightmode.js which begins:

window.onload = function() {
    var a = document.getElementById("night");
    a.onclick = function() {<<code that toggles day and night colors>>}

Does anyone have a solution to why this JavaScript isn't getting run?

Edit: When on Desktop Chrome and the screen is resized all the way down, the button continues to work. But switching the device mode in Chrome reveals that the thing never works for mobile devices. Since this behavior happens even without the WebView, it looks like just a javascript problem now.

Upvotes: 1

Views: 7745

Answers (1)

scthi
scthi

Reputation: 2481

The onload event is fired when everything is loaded. This can take some time. Plus, window.onload might get overwritten later on...

You can try this instead:

var ready = function ( fn ) {

  // Sanity check
  if ( typeof fn !== 'function' ) return;

  // If document is already loaded, run method
  if ( document.readyState === 'complete'  ) {
    return fn();
  }

  // Otherwise, wait until document is loaded
  // The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading. The state indicates that the DOMContentLoaded event has been fired.
  document.addEventListener( 'interactive', fn, false );

  // Alternative: The document and all sub-resources have finished loading. The state indicates that the load event has been fired.
  // document.addEventListener( 'complete', fn, false );

};

// Example
ready(function() {
    // Do night-mode stuff...
});

see: http://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/

Upvotes: 2

Related Questions