javascript - 即使使用 setJavascriptEnabled(true) 和 WebChromeClient，Android webview 也会跳过 javascript

Question

(使用 Samsung Galaxy Tab 和 Android 3.0，这适用于所有 3.0+ 平板电脑，就像在他们的浏览器中一样，只是不是 webview)

我有一个包含 CSS 和 jQuery 的页面，可以在浏览器、android 浏览器和 iOS 设备中正常加载，但 android webview 拒绝始终加载它。

我已经将问题缩小到它只是在加载时跳过 javascript(通过使用一些 webview javascript 演示应用程序复制问题)。这是为什么？

这是完整的测试 HTML 代码 http://pastebin.com/GmE2vEYx

我是这样调用它的:

  myWebview.loadUrl("file:///android_asset/myPage.html");
  myWebview.getSettings().setJavaScriptEnabled(true);
  myWebview.setWebChromeClient(new WebChromeClient());

这三个调用的顺序不会影响结果。

  myWebview.getSettings().setJavaScriptEnabled(true);
  myWebview.setWebChromeClient(new WebChromeClient());
  myWebview.loadUrl("file:///android_asset/myPage.html");

我注意到的一件事是，如果您给它时间(通过在调试器中使用断点暂停应用程序)，那么 javascript 将更一致地加载。这让我进行了一些牵强附会的实验，试图让应用程序加载速度变慢，但这确实不是理想的用户体验。我真的希望 Android webview 真的不是移动开发的 IE6。

其他事实:

如果删除 <script>包含所有 Jquery 的标签，然后页面将快速加载所有 CSS 格式。一旦添加了 Jquery，就不会加载任何内容。

我还发现了其他几个遇到完全相同问题的问题，许多问题没有得到解答，或者对 OP 所寻求的内容没有确定的答案:(

见: Android: can't get javascript to work on WebView even with setJavaScriptEnabled(true)

Page reload (Webview.loadUrl) results in Javascript not being (fully) processed

http://groups.google.com/group/android-developers/browse_thread/thread/9962064ef217a5a7#

JavaScript sometimes doesn't work in android's webview

Android WebView not loading a JavaScript file, but Android Browser loads it fine

Android's Webview cannot handle javascript?

建议？让我们追根究底! android 文档说 webview 有限制，但我不知道限制在哪里，因为人们一直在制作 HTML CSS JS 应用程序!

Answer 1

我还有 Samsung Galaxy Tab 和带有 jQ​​uery javascript 网页的 Android 3.0，并且可以正常工作。确保您的页面在 Crome 浏览器中正常运行，并且您没有 javascript 错误。某些 CSS3 样式存在已知问题(例如图像消失)，但 jQuery 应该可以。如果您尝试使用 javascript 进行通信，请确保在页面加载后执行此操作。还要确保所有文件都在正确的目录中:)。此外，有时内容会被缓存，因此请尝试将其删除(或删除应用程序)。

请提供您的网页源代码，以便我们检查。

WebView 示例:

webView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginsEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setSupportZoom(false);

webView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
webView.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url) 
    {
        // page loaded...
        super.onPageFinished(view, url);
    }
});
webView.setWebChromeClient(new WebChromeClient()
{
    @Override
    public boolean onJsAlert(WebView view, String url, String message,JsResult result) 
    {
        Log.e("alert triggered", message);
        return false;         
    }
});
webView.loadUrl("http://mypage/mypage.html");

希望对你有帮助。

更新 1:我在 Samsung Galaxy 选项卡上测试了您的代码。我变了

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

行。页面已加载，我可以看到带有图片的内容。所以......代码按预期工作。我注意到有时内容没有按应有的方式显示。看来缩放是问题所在:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

$(document).ready() 里面的计算是假的!

顺便说一句...您正在寻找的是带有 WebView 的 ViewPager。

更新 2:另请注意，将网页加载为 file:///时，您必须在同一目录中包含 JS 文件(无外部 URL)。