I have a webpage that "plays a video" using sprite sheets. The page is mobile-optimized, so it can get loaded into Android and iOS WebViews. I'd like to know is when the page is visible so only after that I can play the video. I don't want users to catch the video mid-stream because the WebView lags in presenting itself.
I can see some developers might wait until the whole page has finished pulling in all the assets from the page before making it visible to the user. So, I don't want the "video" to start before that time. I can't rely on window.onload because that event fires even when the WebView isn't onscreen or visible.
How can I accomplish this from the client side, with some JavaScript, preferably?
[Edit] To be clear, I'm implying that I don't have any control over the native WebView. You can load web pages into a WebView that isn't onscreen and push the view or add it to the on-screen layout at a later time. My issue is that when my webpage's URL is loaded into a WebView, I can't tell when the WebView comes onscreen.
Take a look at the Safari Web Content Guide. Scroll down to the Supported Events table. I am thinking (or hoping) that the pageshow event will do what you are hoping for. There is also the focus event.
Looks like using these events for mobile Safari would be as easy as
<body onpageshow="onPageShow();">
I am less familiar with Android, but I will look into it real quick.
EDIT: The onpageshow solution should work the same way in Android 2.2 and above as it does in iOS 4.0 and above. As for whether it works the way you need it to, I am not entirely sure. Let me know!
It is not possible to control the webview using JavaScript. If its not too late to change the design of the app, using native APIs will give you more control of the webview.
You could insert a timeout in the webpage before loading the video. It might be worth a shot.
you can use phonegap library:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the PhoneGap API
}
phonegap is very good for handle events and more action in webview.
Related
I'm quite new of Android and during the development of one app, I have encountered the following issue:
I'm using a WebView inside my app for viewing web sites (it does not matter what kind of site, can be Google or Reddit or anything else). I know I can use a "browser Intent" with Intent.ACTION_VIEW but for the purpose of my App I must use a WebView.
So, I have enabled javascript and DOM api storage with:
getSettings().setJavaScriptEnabled(true);
getSettings().setDomStorageEnabled(true);
My problem comes after that the page has finished loading and some Javascript automatically starts. Basically if the user has already scroll down and the Javascript tells the page to hide/show some content (example a DIV) the scroll resets to top.
My question is:
how can I avoid this behavior? I want that the Javascript loads correctly but it does not interfere with the user's navigation. Is that possible?
Thanks in advance,
Best A.
I am having a great deal of troubles trying to display a webpage in WebView. I am displaying
http://meteo.arso.gov.si/met/en/app/webmet/
If you open the page in browser you can see it loads the main webapp after some time (the popup about technical problems is not there except for today). I tried opening it on browser on my Android device and it loads up properly. However, as said, displaying it in the WebView doesn't load the page properly - the webpp is missing. I am guessing WebView does not handle AJAX/JS. Why and what to do?
You can enable JavaScript for you webview with: webview.getSettings().setJavaScriptEnabled(true); and see if any difference.
If the problems persist, then most probably that page isn't optimized for mobile and there's little you can do about.
I have been struggling with this issue for days now. I am implementing an application for Android and iOS using Sencha Touch. I want to be able to click on a link (a list item) which can point to a html or an image or maybe even PDF documents (for iOS). This file can be either local or on another domain.
I have found two different approaches so far, but haven't got any of them to work perfect. One approach is to change "window.location" and go to a html page containing a frame with a back button and another frame with the file I want to display. Scrolling and zooming works fine but when the user wants to go back the whole application has to be reloaded (all javascript files and so on..).
The other approach is to fetch the desired file using an ajax request and add the response text inside a panel. The problem with this is that the zooming is not working. I tried to listen for a pinch event and then scale the panel but then the scrolling stops working...
So the question is: How do i display external content such as HTML pages and pictures but still preserve the scroll and zoom capabilites and allow the user to go back without having to reload the whole application again?
I am grateful for all information i can get! /Christian
Add the following to your apps onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
It won't work if your ROM does not support mulit-touch but since it is already working in your browser this should do it.
If you are using PhoneGap, you can try to the ChildBrowser plug-in: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
For a pure mobile web app, use the HTML5 cache manifest to avoid reloading when you move between frames and pages: http://diveintohtml5.ep.io/offline.html
I have an HTML page with a div that acts like a momentary on-off switch. It works something like this:
$('#btn').mousedown(function() {
startAction()
})
$('#btn').mouseup(function() {
stopAction()
})
$('#btn').mouseout(function() {
stopAction()
})
This works fine in a regular web browser. But it doesn't work when I load up the page in a WebView under Android. According to this, mousedown events don't work on Android like most people expect them to; so, is there any other way to accomplish this? Basically, what I want is a notification when the user puts a finger down onto the widget, and when the finger is taken away.
I'd prefer to use JQuery, but I don't have to. I'd also prefer a solution that works on other mobile platforms.
If I remember correctly, on Android, the webviews have JS disabled by default and need to be enabled. You can enable them with the document at http://developer.android.com/resources/tutorials/views/hello-webview.html
I think really, you're up to the mercy of the device and the owner as to whether or not the user has javascript enabled.
http://hubpages.com/hub/How-to-enable-disable-JavaScript-on-the-Droid-Android-phone
Hope this helps
~Kevin
I have a question with regard to javascript and touch events in a UIWebview, when the UIWebview is embedded inside a UIScrollview.
The UIScrollview has a number of views (I'll call them "subviews" for simplicity) side by side within it. Each subview is the size of the iPad screen and swiping left/right should move on the next/previous subview. One of these subviews is a UIWebview in which I am running a small javascript app which uses touch events and additionally the iScroll component in some cases.
Unfortunately the fact that the UIWebview is embedded inside the UIScrollview (a practise that apple does not recommend: http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html - see the box labelled 'important') is out of my hands.
The problem I have is with regard to the touch events when swiping in the UIWebview subview.
If I load the google homepage for example the swipe works fine and the next subview moves into view. However when I load one of the JS apps the swipe does not work.
I am assuming the UIWebview component gets the touch events and passes them on to the Javascript inside it so that it can respond accordingly. Does it then also propogate them back to the UIScrollview? Or is it up to the Javascript code to ensure that it does not "stopPropagation" on the event? Any info on how these events are co-ordinated would be very much appreciated.
Lastly, I am a javascript programmer not and objective-c programmer, although I understand the basics of it i.e. I have gone thru a fair few of the Stanford iTunes iOS series of Objective-C videos and have coded a few demos, but that's it.
Thanks very much for your time.
Are the failing pages wider than the UIWebView? If you set the scalesPageToFit property to YES and disable the bounces on the internal UIScrollView that the UIWebView uses, that should solve the problem.
You can use the following to disable the bounces:
for (UIView *view in webView.subviews) {
if (![[view class] isSubclassOfClass:[UIScrollView class]]) continue;
((UIScrollView *)view).bounces = NO;
break;
}
No guarantees about App Store approval though, as I've only used this for apps that weren't distributed through the App Store.