Geek Answers Handbook

How to find out if WebView is displayed on / on screen using JavaScript

I have a webpage that "plays videos" using sprite sheets. The page is optimized for mobile devices, so it can be downloaded to Android and iOS WebViews. I would like to know when the page is visible, so only after that I can play the video. I do not want users to capture the video stream because the WebView is behind the view.

I see that some developers can wait until the whole page finishes pulling all the assets from the page before making it visible to the user. Therefore, I do not want the “video” to begin before this time. I cannot rely on window.onload because this event fires even if the WebView is not displayed on the screen or not displayed.

How can I do this from the client side, with some JavaScript, preferably?

[Edit] To be clear, I mean that I have no control over my own WebView. You can load web pages into a WebView that do not appear on the screen, and then call up the view or add it to the screen layout later. My problem is that when my webpage url loads into the webview, I cannot tell when the webview will appear on the screen.

+8
javascript android ios
source share
3 answers

See the Safari Web Content Guide . Scroll to the list of supported events. I think (or hope) that the pageshow event will do what you hope for. There is also a focus event.

It seems that using these events for mobile Safari would be as simple as

 <body onpageshow="onPageShow();">

I am less familiar with Android, but I will look at it very quickly.

EDIT: The onpageshow solution should work the same in Android 2.2 and higher, as in iOS 4.0 and higher. As for whether it works the way you need, I'm not quite sure. Let me know!

+2
source share

JavaScript web control is not possible. If it’s not too late to change the design of the application, using your own APIs will give you more control over web browsing.

You can insert a timeout on a web page before uploading a video. It may be worth it.

+1
source share

you can use phonegap :

 document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // Now safe to use the PhoneGap API }

phonegap very good for handling events and more actions in web browsing.

+1
source share

More articles:


All Articles