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

我也有三星Galaxy Tab和Android 3.0与jQuery javascript网页，它的工作原理。确保您的页面在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");

我希望它有所帮助。

UPDATE1：我在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（）内的计算是假的！

顺便说一句......你要找的是带有WebViews的ViewPager。

UPDATE2：另请注意，当将网页加载为file：///时，您必须在同一目录中拥有JS文件（无外部URL）。

Answer 2

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

Answer 3

我在很久以前遇到了同样的问题 - 我的最终解决方案是放弃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 4

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

修改

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

您找到的最简单的SSCCE不起作用，但您觉得应该

您的设备的品牌/型号以及您正在使用的Android版本

Android webview SKIPS javascript甚至包含setJavascriptEnabled（true）和WebChromeClient

4 个答案: