安卓项目中,用webview加载html,与js进行交互,实现起来没有问题,但是调试起来很麻烦。
开发的时候用pc测试是比较方便的,谷歌火狐浏览器也支持模拟移动设备测试,但是真机测试,而且是直接用的webview加载html来测试,不同的设备,不同版本的安卓系统,都可能导致问题,调试起来很困难。
要是安卓中能捕获到js运行的错误信息(就是发生错误时,pc端浏览器的控制台输出的那些信息),调试起来就方便多了。
首先,查到了这个页面:http://www.tuicool.com/articles/n6b6B3,“重写WebViewClient类中的onReceivedError()方法和onReceivedSslError()方法来进行 处理”,试了试,发现不能满足要求,这个可以用来处理页面加载时出现的错误,比如“页面不存在”、“页面证书错误”等等。
无意间搜到了这个页面:http://www.2cto.com/kf/201404/292474.html
mWebview.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
// TODO Auto-generated method stub
if (consoleMessage.message().contains("Uncaught ReferenceError")) {
// do something...
}
return super.onConsoleMessage(consoleMessage);
}
});复制上边这段代码,添加自己的输出代码,居然真的可以了。
onConsoleMessage是处理控制台输出信息的,可能一开始的思路错了,一直想着怎么实现webview捕获js的错误,其实js运行错误会从控制台输出,直接处理控制台输出信息就可以了。
java代码:
package com.example.webviewtest;
import android.os.Bundle;
import android.app.Activity;
import android.app.Instrumentation;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView=(WebView)findViewById(R.id.webView);
//启用支持javascript
WebSettings webSettings = webView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
webView.loadUrl("file:///android_asset/index.html");
webView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
webView.setWebViewClient(new MonitorWebClient());
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
// TODO Auto-generated method stub
Log.e("hanyeah", "consoleMessage:"+consoleMessage.message());
if (consoleMessage.message().contains("Uncaught ReferenceError")) {
// do something...
}
return super.onConsoleMessage(consoleMessage);
}
});
}
private class MonitorWebClient extends WebViewClient{
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
//错误提示
Toast toast = Toast.makeText(getBaseContext(), "Oh no! " + description,
Toast.LENGTH_LONG);
toast.setGravity(Gravity.TOP | Gravity.CENTER, 0, 0);
toast.show();
Log.e("hanyeah", errorCode+"\n"+description+"\n"+failingUrl);
//错误<strong>处理</strong>
try {
webView.stopLoading();
} catch (Exception e) {
}
try {
webView.clearView();
} catch (Exception e) {
}
if (webView.canGoBack()) {
webView.goBack();
}
// super.onReceivedError(view, errorCode, description, failingUrl);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
final class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
}
public void myToast(String s){
Toast.makeText(getApplicationContext(), s,Toast.LENGTH_SHORT).show();
}
public void sendKeyEvent(final int keyCode,final int type) {
new Thread(new Runnable() {
public void run() {
// TODO Auto-generated method stub
try {
Instrumentation inst=new Instrumentation();
KeyEvent event ;
if(type==1){
event = new KeyEvent(KeyEvent.ACTION_DOWN, keyCode);
}
else{
event = new KeyEvent(KeyEvent.ACTION_UP, keyCode);
}
inst.sendKeySync(event);
} catch (Exception e) {
// TODO: handle exception
}
}
}).start();
}
//end functions
}//end class DemoJavaScriptInterface
}js代码:
<html>
<head>
<title>webview</title>
<script>
window.onload=function(){
console.log("loaded");
var div=document.getElementById("div");
div.innerHTML="111:"+new Data();//故意将Date拼错。
}
</script>
</head>
<body style="background:rgb(200,200,200)">
hello webview.
<div id="div"></div>
</body>
</html>
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。