Search code examples
cordovaphonegap-pluginsphonegap-buildsplash-screeninappbrowser

hide splashscreen after InAppBroswer has finished loading

I am having trouble delaying the splashscreen on IOS and Android and only removing it when the InAppBroswer has finish. This is the logic I have tried

config.xml

<preference name="splashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />

index.html

<html>
<head>
<title>Example App</title>
<meta charset="utf-8">
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>


<script src="cordova.js" type="text/javascript" ></script>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// Global InAppBrowser reference
var iabRef = null;


function onDeviceReady() {
iabRef = window.open('https://www.example.com/app', '_self', 'location=no,toolbar=no');

iabRef.addEventListener('loadstop', function() { 
    navigator.splashscreen.hide();
});

document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
</script>
<body>
<iframe src="https://www.example.com/app" style="width:100%; height:100%;">
</body>
</html>

The splashscreen shows for a split second, then a whitescreen for about 5 seconds.

The logic in the index was to hide the splashscreen after inAppBroswer has finish loading(loadstop) but this doesnt seem to work.

Any ideas please.

console.log(navigator)

enter image description here

Solution

  • Inappbrowser has a callback after page is finish loading.

    Read the documentation. See addEventListener

    It might look like this:

    ref.addEventListener('loadstop', function() {
    navigator.splashscreen.hide();
});