Android的webview SKIPS JavaScript甚至与setJavascriptEnabled(true)和WebChromeClient

(使用三星Galaxy Tab和Android 3.0,这是打算在每个3.0+平板电脑上工作,就像在他们的浏览器,而不是webview

我有一个CSS和jQuery的页面,在浏览器,Android浏览器和iOS设备上加载罚款,但android webview拒绝加载它一贯。

我已经缩小了这个问题,只是简单地跳过JavaScript的负载(通过复制一些webview的JavaScript演示应用程序的问题)。 为什么是这样?

这里是完整的testingHTML代码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"); 

我注意到的一件事是,如果你花时间(通过在debugging器中暂停一个断点的应用程序),那么JavaScript将更加一致的加载。 这导致我进行了一些尝试使应用程序加载速度变慢的牵强的实验,但这实际上并不是所需的用户体验。 我真的希望Android的webview真的不是移动开发的IE6。

其他事实:

如果删除包含所有Jquery的<script>标记,则页面会快速加载所有CSS格式。 一旦Jquery被添加,什么都不加载。

我还发现了几个其他问题,遇到完全相同的问题,许多人没有回答,或没有确切的答案OP是寻求:(

请参阅: Android:无法获取JavaScript即使使用setJavaScriptEnabled也可以在WebView上工作(true)

页面重新加载(Webview.loadUrl)导致Javascript未被(完全)处理

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

JavaScript有时在android的webview中不起作用

Android WebView不加载JavaScript文件,但Android浏览器加载它很好

Android的Webview无法处理JavaScript?

build议? 让我们来看看这个! android文档说webview有局限性,但是我不知道限制在哪里,因为人们总是在制作HTML CSS JS应用程序!

Solutions Collecting From Web of "Android的webview SKIPS JavaScript甚至与setJavascriptEnabled(true)和WebChromeClient"

我也有三星Galaxy Tab和Android 3.0与jQuery JavaScript网页,它的工作原理。 确保您的页面在Crome浏览器中工作,并且您没有javascript错误。 有一些CSS3样式的已知问题(例如图像消失),但jQuery应该工作。 如果您尝试使用JavaScript进行通信,请确保在加载页面后执行此操作。 也要保证所有的文件都在正确的目录:)。 也有时候内容被caching,所以试图删除它(或删除应用程序)。

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

示例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:我在三星Galaxy选项卡上testing了你的代码。 我变了

 <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:请注意,当加载网页作为文件:/ / /你必须有JS文件在同一目录(没有外部url)。

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

很久以前,我遇到了同样的问题 – 我的最终解决scheme是沟通jQuery,只是使用普通的JS。 从正常的Android浏览器查看时,事情总是在打破,而且工作正常。

如果这些是破坏代码的唯一行,请尝试使用纯JS复制这些行的相同function。 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就绪状态之后,或在标签closures之前)

PS。 另外,因为你使用的是Android的webkit – 为什么需要-moz-column-count?

我不完全确定,如果这是你的问题的原因,但你应该设置WebView 调用loadUrl

编辑

如果这不是问题,你可以考虑发布

  • 你find的最简单的SSCCE不起作用 ,但你觉得应该
  • 设备的制造商/型号以及您正在使用的Android版本