Hide splash screen on android once phonegap site has loaded

问题

I have a website that uses media queries to look good on mobiles, I wrapped this up in phonegap so I can have it as an application too. I have set super.loadUrl to my site and this works, I also have a working splash screen that I want to keep up until the site has loaded. I came across this blog post and followed the instructions. It works if I am super.loadUrl to index.html (the app homepage) but not if I loadUrl of my actual site.

Splash screen code (main java file)

super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("My External Site Url", 20000);

Index.html code (this works if i loadUrl to it, but I want to loadUrl to my site)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    navigator.splashscreen.hide();
}

However, when I use the above code (and include cordova.js) in my external html file, it doesn't recognise onDeviceReady, so the splash screen doesn't hide itself, and I'm stuck waiting 20 seconds.

Am I missing something? Am I even allowed to use onDeviceReady from an external html file (e.g. one that is not build into the app) or should this work and I am just referencing cordova wrong?

回答1:

It turns out an old include of prototype.js was messing this up. Once I removed that it works awesomely.

For future people the errors I got were:

App doesn't react to touch, input buttons and hyperlinks can't be used.
If you press-hold on an input, hyperlink etc it got the orange focus box, but never took me to the link or activated the input button (cursor or keyboard)
Prototype stopped me getting deviceready at any point, but no JS errors were thrown (except IE not liking addEventListener)

回答2:

Try doing this:

<script> 
function init() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
    navigator.splashscreen.hide();
}
</script>
<body onload="init()">

Although since you are using jQuery you may want to change it to:

$(document).ready(function() {
  document.addEventListener("deviceready", onDeviceReady, false);
});

回答3:

Frist add the splashscreen plugin as follow:

$ phonegap plugin add org.apache.cordova.splashscreen

Second build the project,"splashscreen.js" will be merged into the "phonegap.js"

$ phonegap local build

Good Luck

来源：https://stackoverflow.com/questions/12713212/hide-splash-screen-on-android-once-phonegap-site-has-loaded

标签

javascript

eclipse

cordova

splash-screen