I am writing some web app that runs inside android WebView. The WebView is inside some simple Activity class that I open from the app's main menu. The html file and js files are local files. I'm testing on Asus Transformer TF300, OS 4.1.1.
The WebView loads the html file and a second later calls loadUrl('javascript:start()'); which performs:
console.log("hello");
setTimeout("console.log('world');", 1000);
When I run it, only "hello" shows up in logcat.
When I close the activity (it has a close button), I suddenly can see "world" in logcat.
It is as if the js suspended itself until I caused the WebView to close...
Any idea why this happens and how to get the code to run?
Note I tried all kinds of stuff like changing the js code to:
var func = function() { console.log("world"); };
setTimeout(myfunc, 1000);
or:
setTimeout(function() { console.log("world"); }, 1000);
But it didn't help..
thanks.
Related
I want to open page in Cordova WebView and add some styles. I have
function setSize() {
alert('Trying to load styles'); //works
app.insertCSS({code: 'body{width: 100% !important;height: 100% !important;background-color: red !important;}'}, function(){
alert('Styles are loaded!');
});
}
function onDeviceReady() {
var app= window.open('http://example.com','_self','location=no');
app.addEventListener('loadstart', setSize());
}
But it doesn't work. Is there any mistake ?
inAppBrowser is not a page from your application its a web page displays within browser of your app so to apply css into your browser elements you have to load CSS file into page of browser,
So here is an answer I have given in stack overflow before, which is working fine for that OP so try it, may be you will get success in what you wants to do.
I need WebView to show a HTML page A, there are hyperlink tags in page A, which will open page B when clicked. On action bar of my Activity, I have a Button which will call WebView.reload() when clicked. This should be a very simple case of WebView.
PROBLEM:
When running my app on Andorid 4.0.3 or 4.0.4, after click hyperlink ( tags) in page A, Android WevView stays on page A, nothing happend.
What-I-tried:
1. when the problem occurrs, click reload button, WevView is displaying page B correctly.
2. modify source code of page A and B, remove CSS code which affect how tag displays. Then WebView can jump to page B correctly after click hyperlinks in page A.
I think this is a bug in Android 4.0.x, It is not possilbe to remove CSS in HTML, I am stuck with the "reload solution".
Does anyone know the root cause of this bug or a better soluton?
Thanks
Use WebChromeClient for webView fucntionality it should work.Even then you are unable to load the html than debug your code and use alternative which function is not working . because java script and CSS both works in web view only the case if you have made mistake in java script or css thnt it should do strange behavior(not loading/blank load/hang screen).
Issue solved by WORKAROUND in web page source, not Android WebView.
add the following javascript inside html body:
try{
document.documentElement.clientHeight
} catch (e) {
};
above js trys to read web window height, but it will force a refresh of web page.
That's how this js solved this issue.
I guess this should be a bug in Android 4.0.3/4.0.4. But currently you can use this workaround to avoid it, only if your WebView load web pages developed by you.
In a Kendo UI Mobile ListView, a script to open an external link by native browser is called when a link is clicked.
The PhoneGap script is as follow:
On Android:
navigator.app.loadUrl(link, { openExternal:true } );
On iOS:
window.open(link, '_system');
The link can be opened on the corresponding native browser.
However, when the user switch back to the app from the native browser, some problems happen.
On Android, the screen hung on the original view, when the back button is pressed again, the screen is un-freezed and can be refreshed.
On iOS, however, the screen is also hung on the original view. When tapped on the screen, the complete view (with the layout) is moved. There is no way to un-freeze this screen.
How to fix this so that the screen can be un-frezzed after switching back from the native browser to the app?
Thank you very much for your help.
Updated 1:
I changed the original tag to a tag, everythings work now. But I am still curious to see if it is certain kind of bugs for Kendo UI Mobile.
There is a serious problem with Kendo Mobile hanging the page completely, making the app totally unresponsive to touch/mouse. The offending CSS is in Loader.transition() which does this.container.css("pointer-events", "none") which is equivalent to:
document.body.style.pointerEvents = "none";
Ouch - that is ugly. Plus in _attachCapture there is offensive JavaScript for all mouse and touch events that does:
event.preventDefault();
Fatal if using an app with an embedded full page WebView/UIWebView (requiring app to be closed and restarted).
Hangs can happen if:
You have an exception in your code (even in unobvious places),
You mistype a transition (no exception, just hangs),
A user's browser doesn't fire the transitionEnd event properly for some reason (This was repeatable for one user's up-to-date Chrome browser.
There is a failure mode in the Interaction between page transitions and Loader (depending on timing, couldn't repeat),
Multiple other causes
Note that there is a comment in Kendo that says: "This should be cleaned up at some point (widget by widget), and refactored to widgets not relying on the complete callback if no transition occurs.", so clearly Telerik know there is a problem.
You can use the following code during development to at least warn when Kendo Mobile has crapped itself:
var transitionTimer;
kendo.mobile.ui.Loader.prototype.wasTransition = kendo.mobile.ui.Loader.prototype.transition;
kendo.mobile.ui.Loader.prototype.transition = function() {
transitionTimer = setTimeout(function() {
alert('Kendo has hung the page');
}, 10000);
this.wasTransition.apply(this, arguments);
}
kendo.mobile.ui.Loader.prototype.wasTransitionDone = kendo.mobile.ui.Loader.prototype.transitionDone;
kendo.mobile.ui.Loader.prototype.transitionDone = function() {
clearTimeout(transitionTimer);
this.wasTransitionDone.apply(this, arguments);
}
Hi I am using jquery mobile in my android phonegap application.I am showing the loader in the onload using jquery mobile and when loader is running,i can able to type in the textbox in the html page.But my need is when loader is running i should not able to type in the textbox.How to solve this problem
Here is my code:
$(document).ready(function ()
{
$.mobile.loading('show', {
text: 'Loading',
textVisible: true,
theme: 'a',
html:""
});
});
Please Kindly help me.Thanks in Advance.
you could display a splash page first during loading and then switch to your main page...
and: don't use $(document).ready(), see here
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
Hi i'm using phonegap in conjunction with Jquery mobile. I'm trying to immediately fetch the main page, while showing the user a splashscreen.
In PhoneGap for Android i'm using this
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 2000);
While this loads the splash, it also delays the loading of index.html. It it possible to start fetching it right away? Also, if not with phonegap, has anybody done this using JQM instead of phonegap?
UPDATE: After using it with a slower loading first page (doing a json request) it kinda looks like the splash screens shows for a longer period of time, so this appears to be the default behavior
As given here, you could kill the splashscreen once you have loaded all the assets and DOM elements have been loaded.
something like this:
Java:
super.setIntegerProperty("splashscreen",R.drawable.splashscreen);
super.loadUrl("file:///android_asset/www/index.html", 2000);
on your HTML, javascript section:
function onDeviceReady()
{
cordova.exec(null, null, "SplashScreen", "hide", []);
window.MacAddress = new MacAddress();
window.MacAddress.getMacAddress(function(result){
database._mac_address = result.mac;
}, function(){
database._mac_address = '01:02:03:04:05:06';
});
}
I've implement better solution.
You can set your custom splashscreen and hide it with JS call after page have been loaded
https://github.com/inetstd/phonegap-android-custom-splashscreen/wiki