PhoneGap 2.5 permitted users to fade out the splash screen after a delay (http://docs.phonegap.com/en/2.5.0/guide_project-settings_ios_index.md.html), but the functionality seems no longer documented in PhoneGap 3.2. If the functionality was removed, is there another way of accomplishing this within PhoneGap, or do we need to programmatically implement this by adding the Splash Screen plugin ourselves?
We already tried adding <preference name="fade-splash-screen-duration" value="5" />
to the config.xml file under the project folder, but it had no effect.
Thanks
Try adding this in the config.xml
<preference name="auto-hide-splash-screen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="fade-splash-screen-duration" value="5" />
and this in the onDeviceReady();
setTimeout(function() {
navigator.splashscreen.hide();
}, 1000);
Kevin's example works, but the only preference actually required is:
<preference name="AutoHideSplashScreen" value="false" />
Related
I built an app for ios and android 2 years ago where I load and display data from an external xml file.
I am trying to make an updated app, and the data is not showing. Has anything changed with how this is handled in the last couple years? I have tried adding the Network Status plugin as it seems like the issue might be connecting to the data.
I have tried adding access origin="*" to all config.xml files as that was usually my problem before.
This is the code I am using:
else {/* code for IE6, IE5 */ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.open("GET","http://www.example.com/example.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("order");
for (i=0;i<x.length;i++)
{
document.write("<div class=\"bar\"><center><a href=\"");
document.write(x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue);
document.write("\" data-ajax=\"false\" ><img src=\"images/icon-");
document.write(x[i].getElementsByTagName("item")[0].childNodes[0].nodeValue);
document.write(".png\"></a></center></div><br><br>");
}
Yes things have changed a bit due to WKWebView and security
For iOS, use cordova-plugin-ios-xhr and set your preferences to
<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />
You can also add these preferences to load external urls
<preference name="AllowUntrustedCerts" value="true" />
<preference name="InterceptRemoteRequests" value="all" />
For Android, set your preferences to
<preference name="AndroidInsecureFileModeEnabled" value="true" />
I have problem to hide splashscreen after platform is ready. This is problem only on ios, only on testflight app. I can't build it with cordova 10 locally. When I build locally app with cordova 9 (this is only difference), this method is working.
this.platform.ready().then(() => {
this.splashscreen.hide()
});
I'm sure that all imports are ok, all is installed.
package.json: "cordova-ios": "^6.1.0", "cordova-plugin-splashscreen": "^6.0.0",
config.xml - splashscreen values
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="loadUrlTimeoutValue" value="700000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="DisallowOverscroll" value="true" />
<preference name="FadeSplashScreen" value="false" />
Anyone has idea? I tried add setTimout, it doesn't work.
We ran into the same problem. In cordova-ios#6.x they pulled the splashscreen plugin into the platform itself. This can also be seen in the Supported Platforms in the latest docs.
What we found was that the call to .hide() seems to trigger the hide after SplashScreenDelay. So if you get rid of your SplashScreenDelay setting, I bet your calls to Hide() will start working as you expect (since you have AutoHideSplashScreen set to false already).
If you are like me, and you want the auto-hide ability AND the ability to manually call hide, you can consider just triggering a .hide() in a timer, which will fire as a backup plan (in case your other .hide() doesn't fire). It seems there is no negative impacts of calling .hide() twice.
//Poor-man's Auto-Hide
Observable.timer(15000).subscribe(()=>{
this.splashScreen.hide();
});
I need to increase time delay of splash screen in ios devices. I'm using IONIC.
Following is my config file:
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen"/>
<param name="onload" value="true" />
</feature>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="orientation" value="portrait"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="8000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="auto-hide-splash-screen" value="false" />
It's working in Android device by simply adjusting SplashScreenDelay. I don't know why splash screen is hiding automatically after setting AutoHideSplashScreen is false.
You can disable the automatic handling of splash screen and programmatically hide it when the app is ready.
Originally from ionicframework forum (with slight changes):
Install the cordova splashscreen plugin:
cordova plugin add cordova-plugin-splashscreen
Make sure you have the following in config.xml of your project:
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
In app.js, add the following in the run method:
setTimeout(function() {
navigator.splashscreen.hide();
}, 100);
After adding, the code should look as follows:
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide splash screen
setTimeout(function() {
navigator.splashscreen.hide();
}, 100);
// some other things
});
})
We can implement this by installing cordova splashscreen plugin .For more refer link http://learn.ionicframework.com/formulas/splash-screen/
cordova plugin add org.apache.cordova.splashscreen
app.run(function($cordovaSplashscreen) {
setTimeout(function() {
$cordovaSplashscreen.hide()
}, 5000)
})
platforms\android\cordova\default.xml
You can add default configuration that is needed for config.xml.
At run time config.xml will changed by ionic framework so needs to change in default.xml will refelect in config.xml too.
I have an issue regarding Phonegap on iOS: splash screen cannot be closed programmatically - it just stays visible.
When I change the splashscreen config to enable autohide, it hides without a problem.
Also note that on Android it works fine.
here is my config:
<preference name="detect-data-types" value="true"/>
<preference name="exit-on-suspend" value="false"/>
<preference name="show-splash-screen-spinner" value="true"/>
<preference name="android-minSdkVersion" value="14"/>
<preference name="android-installLocation" value="auto"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="SplashScreen" value="screen"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="auto-hide-splash-screen" value="false" />
<preference name="SplashScreenDelay" value="100000" />
<preference name="StatusBarOverlaysWebView" value="false" />
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen"/>
<param name="onload" value="true" />
</feature>
Javascript (I am using Angular + Ionic framework)
.$ionicPlatform.ready(function () {
setTimeout(function(){
navigator.splashscreen.hide();
}, 1000);
})
I know this is an older question, but in case somebody else needs help. It might be fine on Android because everything (including navigator.splashscreen) loaded before the deviceready was called. What I had to do was remove the ng-app attribute and add an event listener for deviceready on the index page which then starts the angular application when everything is available.
<script type="text/javascript">
document.addEventListener('deviceready', function onDeviceReady() {
angular.bootstrap(document, ['myApp']);
}, false);
</script>
I found information on this at:
how to deviceready in right way in ionic application
Ionic Framework Forum
Is there an error coming from that line? You can check it by alerting in case of exception caught if you aren't using remote debugger for your app. Example:
try {
navigator.splashscreen.hide();
}
catch (e) {
alert(e); // This might be object, though, so maybe not showing the cause
}
If there is an error coming, it probably means that you haven't correctly installed the SplashScreen plugin for your application. You can check it as described here.
You can try following
$ionicPlatform.ready(
function(){
$cordovaSplashscreen.hide();
});
Note : you need to call $cordivaSplashscreen.hide() function. You might want to use NG Cordova Plugins if you are using the IONIC Framework.
Similarly if you want to use time out you can have following code
$ionicPlatform.ready(function() {
var hidesplashscreen = function() {
$cordovaSplashscreen.hide();
};
$timeout(hidesplashscreen, 2000);
});
I am trying to control the font color of the iOS 7 & 8 status bar. I am constantly seeing two different plugins being referenced with a slate full of <preferences/>. I am hoping someone can shed some light on the difference between the two and which they have had success implementing.
<gap:plugin name="com.phonegap.plugin.statusbar" />
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
<false/>
</gap:config-file>
and
<gap:plugin name="org.apache.cordova.statusbar" />
<preference name="StatusBarStyle" value="lightcontent" />
I have tried both and can't get the font color to be light (white). Thank you in advance for any guidance you can give here.
Just change the value to darkcontent. This is iOS.
The plugin i'm using is
org.apache.cordova.statusbar
You should use the correct plugin if you are using phonegap. I'm using Cordova 3.6
This is how I get the status bar to act like a "normal" status bar.
<preference name="StatusBarStyle" value="darkcontent" />
<preference name="StatusBarOverlaysWebView" value="false" />
My config.xml:
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="darkcontent" />