最近项目中使用到了WebView,所有就深入研究了Webview的使用以及与JavaScript进行交互的问题。经过研究,自己也做了一个综合性的例子,以此来记录自己的学习成果。此例子主要实现了WebView的简单使用以及Android与Js进行交互的问题。
第一:WebView的使用
1.WebView使用过程中需要网络权限,所以第一步要在清单文件声明此权限。
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
2.在布局文件中添加WebView控件,或者通过JAVA代码之间实例化Webview,此Demo是通过布局文件实现的。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
3.对WebView进行相关设置,具体Api在代码中有注释,再此不在详细叙述。
package cn.chinaiptn.webviewdemo;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class WebViewDemoActivity extends AppCompatActivity {
private WebView webview;
private WebSettings webSettings;
private Activity mActivity;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webviewdemo);
mActivity = WebViewDemoActivity.this;
webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("http://www.baidu.com");
WebSettings webSettings = webview.getSettings();
//设置支持Javascript
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
//允许放到或者缩小
webSettings.setSupportZoom(true);
//隐藏webview缩放按钮
webSettings.setDisplayZoomControls(false);
// 为图片添加放大缩小功能
webSettings.setUseWideViewPort(true);
//自适应屏幕
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webSettings.setLoadWithOverviewMode(true);
//取消滚动条
webview.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
//设置打开别的url是不适用系统浏览器
webview.setWebViewClient(new MyWebviewClient());
}
class MyWebviewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
//按下返回键的处理
if (webview.canGoBack() && keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
webview.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
}
第二:Android 调用JS代码
这里主要分两部分介绍,调用有参函数和调用无参数函数。
1.调用无参数函数。
(1)编写HTML代码,并放到assets目录下,相关html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="title">Nativetojs</title>
<script type="text/javascript">
function javacalljs(){
document.getElementById("nativetojs").innerHTML =
"<br\>JAVA调用了JS的无参函数";
}
</script>
</head>
<body >
<p>安卓调用js</p>
<div style="margin-top: 20px;margin-left: 20px">
<div id="nativetojs"></div>
</div>
</body>
</html>
(2)在JAVA代码中进行调用:
加载本地html代码:
webview.loadUrl("file:///android_asset/nativetojs.html");
设置时间监听,调用JS代码(此处一定要确保函数名称与JS中的函数名称一致):
btn_tojs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljs()");
}
});
(3)效果图如下:
2.安卓调用有参函数
(1)编写HTML代码,并放到assets目录下,相关html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="title">Nativetojs</title>
<script type="text/javascript">
function javacalljswith(arg){
document.getElementById("nativetojs").innerHTML = "<br\>JAVA调用了JS的有参函数"+arg;
}
</script>
</head>
<body >
<p>安卓调用js,包含参数</p>
<div style="margin-top: 20px;margin-left: 20px">
<div id="nativetojs"></div>
</div>
</body>
</html>
(2)在JAVA代码中进行调用:
加载本地html代码:
webview.loadUrl("file:///android_asset/nativetojswithparam.html");
设置时间监听,调用JS代码(此处一定要确保函数名称与JS中的函数名称一致,并确保字符串两端加上引号,否则会执行不到JS):
btn_tojs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String content = ed_content.getText().toString().trim();
webview.loadUrl("javascript:javacalljswith("+"'"+content+"'"+")");
}
});
(3)运行效果如下:
第三:JS调用Android代码
(1)编写HTML代码,并放到assets目录下(确保onclick下的别名和方法名与JAVA代码中一致),相关html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="title">JStoNative</title>
</head>
<body >
<p style="font-size:34px">JS调用安卓代码</p>
<div style="margin-top: 20px;margin-left: 20px">
<input type="button" value="我要调用安卓代码啦。" οnclick="jstoandroid.startFunction()" /></br>
<input type="button" value="我要调用安卓代码啦,切换页面" οnclick="jstoandroid.updateActivity()" />
</div>
</body>
</html>
(2)在JAVA代码进行相关实现
//由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
//JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应
@JavascriptInterface
public void startFunction(){
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(JsToNativieActivity.this, "hahahha", Toast.LENGTH_SHORT).show();
}
});
}
@JavascriptInterface
public void updateActivity(){
runOnUiThread(new Runnable() {
@Override
public void run() {
Intent intent=new Intent(JsToNativieActivity.this,MainActivity.class);
startActivity(intent);
}
});
}
到此,Webview的简单使用以及与JS的交互已经介绍完毕,如果有不正确出之处,欢迎讨论!