如何使用 JavaScript 确定 WebView 是否显示/在屏幕上/可见答案

【问题标题】：How to find out if WebView is displayed/onscreen/visible using JavaScript如何使用 JavaScript 确定 WebView 是否显示/在屏幕上/可见
【发布时间】：2013-02-15 14:27:30
【问题描述】：

我有一个使用精灵表“播放视频”的网页。该页面针对移动设备进行了优化，因此可以加载到 Android 和 iOS WebViews 中。我想知道页面何时可见，所以只有在那之后我才能播放视频。我不希望用户在中途观看视频，因为 WebView 会滞后于呈现自身。

我可以看到一些开发人员可能会等到整个页面完成从页面中提取所有资产之后才将其对用户可见。所以，我不希望“视频”在那之前开始。我不能依赖 window.onload，因为即使 WebView 不在屏幕上或不可见，该事件也会触发。

我怎样才能从客户端完成此操作，最好使用一些 JavaScript？

[编辑] 明确地说，我的意思是我对本机 WebView 没有任何控制权。您可以将网页加载到不在屏幕上的 WebView 并推送视图或稍后将其添加到屏幕布局中。我的问题是，当我的网页 URL 加载到 WebView 中时，我无法判断 WebView 何时出现在屏幕上。

【问题讨论】：

你试过 jQuery $(document).ready(function() { // 显示视频的代码 });
作为一个简单的修复，我会使用 setTimeout() 为动画添加一点延迟
嗯，我根本没有使用 jQuery。仅为该 ready 函数包含该库是一个好主意吗？什么是常规的 ol' JavaScript 等价物？
@kennypu 如果 WebView 直到用户操作才显示怎么办？我无法预测...
我以为网页是在显示 webview 时加载的？如果没有，你可以这样做；显示 web 视图时显示/刷新页面。

标签： javascript android ios

【解决方案1】：

看看Safari Web Content Guide。向下滚动到支持的事件表。我在想（或希望）pageshow 事件会如您所愿。还有focus事件。

看起来将这些事件用于移动 Safari 就像

<body onpageshow="onPageShow();">

我对 Android 不太熟悉，但我会尽快研究一下。

编辑：onpageshow 解决方案在 Android 2.2 及更高版本中的工作方式与在 iOS 4.0 及更高版本中的工作方式相同。至于它是否按您需要的方式工作，我不完全确定。告诉我！

【讨论】：

感谢您的回答！我还没有机会测试，但我会在测试时报告结果。再次感谢

【解决方案2】：

你可以使用phonegap库：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use the PhoneGap API
}

phonegap 非常适合处理事件以及webview中的更多操作。

【讨论】：

【解决方案3】：

无法使用 JavaScript 控制 web 视图。如果现在更改应用程序的设计还为时不晚，使用原生 API 可以让您更好地控制 web 视图。

您可以在加载视频之前在网页中插入超时。可能值得一试。

【讨论】：