I want to render a remote HTML page when my Cordova app starts, instead of "./index.html"
Tried this in config.xml
<content src="http://example.com/index.html" />
<access origin="*" />
And also tried placing this into ./index.html
window.location.href = 'http://example.com/index.html';
Both load a blank white screen when I start the app. Got no errors in the device log. Using Cordova version 5.3.3.
Any ideas?
If you want to use <access origin="*" /> you need to add this meta tag to your html page(s) in your cordova app:
<meta http-equiv="Content-Security-Policy" content="*">
I hope this helps you!
In your index.html page, you can write windows.onload() function inside this write redirect to this http://example.com/index.html
You can change the loadUrl statement in the native code e.g. in Android, you need to find MainActivity.java under platforms/android/src....
I myself am currently looking for a way to do this from index.html (to display for e.g. a loading screen / error message in case of network issues).
I believe I had tried using window.location.href but that simply opened the browser to the specified URL. I want it to open up in the app's WebView of course.
Related
I have one cordova app that loads content directly from client website.I have used it like <content src="https://example.com/ios/index.html"> in config.xml file.I have used the splashscreen delay of 6 seconds.and the issue is when the splash screen hides shows the black screen for 5-10 seconds and after that client website content is shown.and also sometimes i am getting the error CONNECTION TO SERVER WAS UNSUCCESSFULL.I have also specified <preference name="loadUrlTimeoutValue" value="700000" /> but still having same issue.Anyone having the same issue for cordova ios and android app?can anyone help me with this issue.
You shouldn't do it like that. Now I don't want to play this script where you ask A and I tell you to do B, don't worry, but it's really not the way you should do it.
You should make cordova load an index.html which loads a javascript file cordova.js. You don't need to actually have it, the js file will be included when you compile the app.
Then you should add the whitelist plugin in case you don't already it, in order for your website to load correctly. https://www.npmjs.com/package/cordova-plugin-whitelist
You should disable auto-hide for the splashscreen in config.xml like so:
<preference name="AutoHideSplashScreen" value="false" />
You should then make the javascript load a fullscreen iframe with your website like so, then detect when loading has finished: (This should go into your index.html, in the cordova app)
<html>
<head>
<title></title>
</head>
<body>
<iframe id='frameid' onload='iframeLoaded();' src='https://mywebsite.com/mypage.html' style='border: 0; width: 100%; height: 100%'>Your browser doesn't support iFrames.</iframe>
<script src='cordova.js'></script>
<script>
iframe = document.getElementById("frameid");
iframe = document.getElementById("frameid");
function ready(callback){
// in case the document is already rendered
if (iframe.readyState!='loading') callback();
// modern browsers
else if (iframe.addEventListener) iframe.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (iframe.readyState=='complete') callback();
});
}
ready(function(){
setTimeout(function(){
navigator.splashscreen.hide();
},555)
});
</script>
</body>
</html>
I haven't used cordova for a few months but that's how I did it if I didn't forget anything - Hoping I didn't... I didn't have time to test this, but you get the gist:
App start
Show Splashscreen
Load Index.html with Iframe in fullscreen pointing to https website.
Wait for iframe to finish loading.
Close splashscreen
Tell me if you run into any issue and I can help you further.
so i'm trying to load a PDF from external source into an iframe, it works fine on desktop and mobile view but when it comes to cordova android application it doesn't load, the iframe just goes/shows blank
I've tried using cordova whitelist.
added these in config.xml
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
but still no luck
<div id="QR" data-role="view" data-model="Your data model name"></div>
Please above code put in your HTML file
Then Below code put in your click button event
Please replace PDF url instated of "http://www.google.in";
//Append iframe
$("#iframe1").find(".view-content").append('<iframe id="iframe2" src="" target="_parent"></iframe>');
var iFr1 = document.getElementById('iframe2');
iFr1.src = "http://www.google.in";
var $if1 = $("#iframe1").find("#iframe2");
$if1.load(function () {
alert("iframe loaded");
});
<div class="fb-like" data-href="http://www.mywebsite.com" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
Tweet
<div class="fb-messengermessageus"
messenger_app_id="xxx"
page_id="xxx"
color="white"
size="large">
</div>
I am trying to show Facebook Like, Share and Twitter tweet buttons on my phonegap app.
When running the above codes on my actual device, Facebook related buttons are totally not visible.
Twitter tweet button is visible, but if you press it, there is an error that says 'Refused to display 'https://twitter.com/intent/tweet?....'
If I try to add the following in my config.xml:
<access origin="tel:*" launch-external="yes" />
<access origin="http:*" launch-external="yes" />
<access origin="https:*" launch-external="yes" />
Then pressing tweet button will have no error, but still, nothing shows up.
Why? How to make these buttons open up corresponding apps or external browser?
In Phonegap you can open the in app browser like so:
window.open('fb://profile/xxxx', '_blank', 'hidden=yes');
Please refer to This documentation in order to move forwards. You may have to encode all of the parameters you mentioned above in your URL.
The Connection to the server was unsuccessful(file:///android-asset/www/index.html)
is showing when i run my android application.
please let me know how to resolve this issue.
For latest Cordova (4+) this a setting in config.xml:
e.g.
<preference name="LoadUrlTimeoutValue" value="70000"/>
Increases default timeout to 70 seconds (default is 20), reducing the chance of timing out.
Docs: https://cordova.apache.org/docs/en/latest/config_ref/index.html#preference
When loading a page, the amount of time to wait before throwing a
timeout error.
This may asked here many times..
This issue can fix by adding a timeout to the webview call (index.html). In your project_name.java class just add this
super.setIntegerProperty("loadUrlTimeoutValue", 5000);
And in Cordova latest, just use this to timeout
super.loadUrl(Config.getStartUrl(), 5000);
Also go through these so questions
Question1
Question2
UPDATE :
One more solution, try this
Create a main.html and put your code there, and in your index.html just redirect to main.html
<script>
window.location='./main.html';
</script>
This blog post from Robert Kehoe:
Seemed to be EASY to me
Made sense to me
WORKED for me
Rename your index.html to "main.html"
Create a new "index.html" and put the following content into it:
<!doctype html>
<html>
<head>
<title>the title</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
Rebuild your app! No more errors!
Robert also said,
Another good idea is to give your application a “splash screen”, so that the user gets instant feedback that your app is loading/working, before it is fully ready.
The main problem for this issue is take more time to load your page.
yes it's can a hack to solve this issue, make a html page name
index.html and your existing index page name to be change as a
main.html or any other one give a redirection to this page like this
<script>
window.location='main.html';
</script>
am sure it's work very much
hey i think this error may come load multiple script in starting time so it will take more time.
so you set like this in your java...
super.loadUrl("file:///android_asset/www/index.html");
super.setIntegerProperty("loadUrlTimeoutValue", 600000);
reference1
reference2
I'm trying to build a simple localStorage example using android webview. I'm having some trouble when i close the app. Everytime i start the app, values stored in localStorage disappear. I googled it and couldn't find a proper solution. Here I put my HTML, Java, Manifest code samples. Any help will be appreciated.
HTML :
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>
JAVA:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setDatabaseEnabled(true);
webView.getSettings().setDatabasePath(this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath());
webView.loadUrl("http://www.example.com/sample.html");
setContentView(webView);
MANIFEST:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
Permission lines are placed under tag but outside the tag
and here is the scenario:
-turn off the internet connection of the mobile device
-start the app
-open the page inside the webview
-tap the button several times
-close the app (close it inside the task manager)
-turn on the internet connection of the mobile device
-start the app
-open the page
-tap button several times and it counts from beginning
you can create different scenarios while trying. The main problem is how to set the webView to use localStorage properly?There is something that i'm missing about webview.(this error does not occur when you try it on the chrome browser or any other browser)
This seems like a bug of webview. I was actually trying to open 3 different pages inside a webview and I was loosing localStorage data. I splitted this activity into 3 activities that each of them opens only one page. And the problem disappeared.