- 我们先来了解一下WebView
- 1 添加权限：AndroidManifest.xml中设置权限"android.permission.INTERNET",否则会出Web page not available错误。
- 2 在要Activity中生成一个WebView组件：WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件
- 3 设置WebView基本信息：
mWebView = (WebView) findViewById(R.id.wb);
mWebView.getSettings().setJavaScriptEnabled(true);//支持javascript
mWebView.requestFocus();//触摸焦点起作用mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);//取消滚动条
mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置允许js弹出alert对话框
//load本地
mWebView.loadUrl("file:///android_asset/hellotest.html");
//load在线
//mWebView.loadUrl("http://www.google.com");
//js访问android，定义接口
mWebView.addJavascriptInterface(new JsInteration(), "control");
//设置了Alert才会弹出，重新onJsAlert（）方法return true可以自定义处理信息
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
//return super.onJsAlert(view, url, message, result);
Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();
return true;
}});
- 4 设置WevView要显示的网页：互联网用:webView.loadUrl("http://www.google.com"); 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中**
- 5 如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。给WebView添加一个事件监听对象（WebViewClient)并重写其中的一些方法： shouldOverrideUrlLoading：对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法，并传递参数
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl("");
return true;
}
- 6 处理https请求
webView默认是不处理https请求的，页面显示空白，需要进行如下设置：
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
handler.proceed(); // 表示等待证书响应
// handler.cancel(); //表示挂起连接，为默认方式
// handler.handleMessage(null); //可做其他处理
1，接收到Http请求的事件onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
2，载入页面完成的事件public void onPageFinished(WebView view, String url){ }
同样道理，我们知道一个页面载入完成，于是我们可以关闭loading条，切换程序动作。
3，载入页面开始的事件public void onPageStarted(WebView view, String url, Bitmap favicon) { }
这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。 通过这几个事件，我们可以很轻松的控制程序操作，一边用着浏览器显示内容，一边监控着用户操作实现我们需要的各种显示方式，同时可以防止用户产生误操作。
- 如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK &&IdWebView.canGoBack()){
IdWebView.goBack(); //返回前一个页面
return true;
}
return super.onKeyDown(keyCode, event);
}
二. webview与js的交互（相互调用参数、传值）
<!DOCTYPE html><html><head> <meta charset="utf-8">
<title>jaydenxiao遇上了webview</title>
<script>
function sayHello() {
alert("我是无参无返回toast")
}
function alertMessage(message) {
alert(message)
}
function toastMessage(message) {
window.control.toastMessage(message)
}
function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}
function sumToJava2(number1, number2) {
return number1 + number2;
}
</script>
</head><body>
<button type="button" id="button" onclick="toastMessage('js调用了android方法')">js访问android中方法</button>
</body>
</html>
调用示例
js调用java
调用格式为window.jsInterfaceName.methodName(parameterValues)
此例中我们使用的是control作为注入接口名称
function toastMessage(message){
window.control.toastMessage(message)
}
function sumToJava(number1 ,number2){
window.control.onSumResult(number1 +number2)
}
Java调用JS
webview调用js的基本格式为
webview.loadUrl("javascript:methodName(paraameterValues)")
- 1 android调用js无参无返回值函数
final String call = "javacript:sayHello()";
mWebView.post(new Runnable(){
public void run(){
mWebView.loadurl(call);
}
});
- 2.android调用js有参无返回值函数
final String call = "javascript:alertMessage(\""+"我是android传过来的内容，hey,man"+"\")"
mWebView.post(new Runnable(){
public void run(){
mWebView.loadUrl(call);
}
})
-3.android调用js有参有返回值函数（（4.4以上）
Android 4.4以上使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法
js代码如下：
function sumToJava2(number1, number2) {
return number1 + number2;
}
android代码如下：
@TargetApi(Build.VERSION_CODES.KITKAT)
public void Android2JsHaveParmHaveResult2(View view) {
mWebView.evaluateJavascript("sumToJava2(3,4)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String Str) {
Toast.makeText(getApplicationContext(), "我是android调用js方法(4.4后)，入参是3和4，js返回结果是" + Str, Toast.LENGTH_LONG).show();
}
});}
最后，我们讲一下我们的webview的内存泄露问题
public void releaseAllWebViewCallback() {
if (android.os.Build.VERSION.SDK_INT < 16) {
try {
Field field = WebView.class.getDeclaredField("mWebViewCore");
field = field.getType().getDeclaredField("mBrowserFrame");
field = field.getType().getDeclaredField("sConfigCallback");
field.setAccessible(true);
field.set(null, null);
} catch (NoSuchFieldException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
} catch (IllegalAccessException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
}
} else {
try {
Field sConfigCallback = Class.forName("android.webkit.BrowserFrame").getDeclaredField("sConfigCallback");
if (sConfigCallback != null) {
sConfigCallback.setAccessible(true);
sConfigCallback.set(null, null);
}
} catch (NoSuchFieldException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
} catch (ClassNotFoundException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
} catch (IllegalAccessException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
}
}
}
在webview的 destroy方法里 调用这个方法就行了。
public class WithPhotoWebActivity extends AppCompatActivity{
private ProgressBar pg;
private WebView mWebView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_with_photo_webview);
initView();
}
private void initView() {
pg = (ProgressBar) findViewById(R.id.pg);
pg.setVisibility(View.VISIBLE);
mWebView = (WebView) findViewById(R.id.wb);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("http://m.3gbizhi.com/");
mWebView.addJavascriptInterface(this,"imagelistner");
mWebView.setWebViewClient(new MyWebViewClient());
mWebView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View view) {
WebView.HitTestResult result = mWebView.getHitTestResult();
if(result!=null){
int type = result.getType();
if(type == WebView.HitTestResult.IMAGE_TYPE ||type == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE){
String imgurl = result.getExtra();
Toast.makeText(WithPhotoWebActivity.this, imgurl, Toast.LENGTH_SHORT).show();
}
}
return true;
}
});
}
@JavascriptInterface
public void openImage(String img) {
System.out.println(img);
//ShowWebImageActivity.startAction(this,img);
System.out.println(img);
}
private void addImageClickListner(){
// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
mWebView.loadUrl(
"javascript:(function(){"+
" var objs = document.getElementsByTagName(\"img\");"+
" for(var i=0;i<objs.length;i++)"+
" {"+
" objs[i].onclick=function()"+
" {"+
" window.imagelistner.openImage(this.src);"+
" }"+
" }"+
" })()"
);
}
private class MyWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
pg.setVisibility(View.GONE);
view.getSettings().setJavaScriptEnabled(true);
super.onPageFinished(view,url);
// html加载完成之后，添加监听图片的点击js函数
addImageClickListner();
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageStarted(view, url, favicon);
}
}
}
