Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find out if WebView is displayed/onscreen/visible using JavaScript

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.

like image 819
user2122422 Avatar asked Mar 01 '13 06:03

user2122422


People also ask

Does WebView support Javascript?

JavaScript is disabled in a WebView by default. You can enable it through the WebSettings attached to your WebView . You can retrieve WebSettings with getSettings() , then enable JavaScript with setJavaScriptEnabled() . WebView myWebView = (WebView) findViewById(R.

What is loadUrl?

loadUrl when you say loadUrl. From documentation, only difference between them is, loadURL renders a webkit having a url that you set. On the other hand, loadData renders webkit, that source code comes from a parameter, and baseURL is also a parameter.

Is Android WebView deprecated?

This interface was deprecated in API level 12. This interface is now obsolete.


1 Answers

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!

like image 130
Mathew Avatar answered Sep 28 '22 16:09

Mathew