Android webview SKIPS javascript 即使使用 setJavascriptEnabled(true) 和 WebChromeClient

Question

（使用三星 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。

其他事实：

如果您删除包含所有 Jquery 的 <script> 标记，则页面会以所有 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

很久以前我遇到了同样的问题——我的最终解决方案是放弃 jquery 并只使用普通 JS。从普通的 Android 浏览器查看时，事情总是在正常工作时出现问题。

如果这些是破坏代码的唯一行，请尝试使用纯 JS 重现这些行的相同功能。 Android 的原生 webview 对所有最新的 JS 好东西都有很好的支持，

所以……

$('body').css({height : height+'px', width : Math.floor(width*0.98)+'px' });
$('.text').css({height : height+'px', width : Math.floor(width*0.98)+'px' }); 
$('#firstpage').css({height : height+'px', width : Math.floor(width*0.98)+'px' }); 
$('body').prepend('<style>.text{-moz-column-count:'+numCols+';-webkit-column-count:'+numCols+';}</style>'); 

会...

var doc = document,
    body = doc.getElementsByTagName('body')[0],
    bodyStyle = body.style,
    firstPage = doc.getElementById('firstpage'),
    firstPageStyle = firstPage.style,

    head = doc.getElementsByTagName('head')[0],
    style = doc.createElement('style'),
    rules = doc.createTextNode('.text{-webkit-column-count:'+numCols+';}');

bodyStyle.height = height + 'px';
bodyStyle.width = Math.floor(width * 0.98) + 'px';

firstPageStyle.height = height + 'px';
bodyStyle.width = Math.floor(width * 0.98) + 'px';

style.type = 'text/css';

if( style.styleSheet )
    style.styleSheet.cssText = rules.nodeValue;
else 
    style.appendChild( rules );

head.appendChild( style );

只要确保上面的代码在所有使用的元素都加载之后运行（在 DOM 就绪状态之后，或者在标签关闭之前）

ps。另外，既然您使用的是 Android 的 webkit - 为什么需要 -moz-column-count？

Answer 2

答案是javascript需要在HTML页面<script>sections内的函数中，然后需要注入 webview.loadUrl("javascript:yourJavascriptFunction()") after webview.setWebviewClient(new WebviewClient(){ public void onPageFinishedLoading(){ ...//js injections here });

Answer 3

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

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

示例网页视图：

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： 我在三星 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() 里面的计算是假的！

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

更新2： 另请注意，在将网页加载为 file:/// 时，您必须将 JS 文件放在同一目录中（没有外部 URL）。

Answer 4

我不完全确定这是否是您的问题的原因，但您应该在设置 WebView

之后致电 loadUrl

编辑

如果这不是问题，您可以考虑发布

• 你发现最简单的SSCCE 不起作用，但你觉得应该这样做
• 您设备的品牌/型号以及您使用的 Android 版本