在main下面New - Directory新建
assets - New - File
新建一个js_android.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript">
//这个方式是被java调用的
function androidCallJs(){
alert("java调用js弹窗");
}
function androidCallJs(zhi){
alert(zhi);
}
function aa(){
var name=document.getElementById("user").value;
text.showToast(name);
}
</script>
</head>
<body>
<input id="user" type="text"/>
<input type="submit" οnclick="aa()" value = "点击获取输入框的值"/>
<input type="button" οnclick="text.showToast('js调用Android,我是XXX')" value="js调用java代码"/>
</body>
</html>
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
<ProgressBar
android:id="@+id/pb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"/>
<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="JAVA调用js代码"/>
<Button
android:id="@+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="加载百度页面"/>
<Button
android:id="@+id/btn3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="上一页"/>
<WebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
MainActivity里面,设置webview的显示,映射等:
public class MainActivity extends AppCompatActivity {
private WebView wv;
private Button btn1;
private Button btn2;
private Button btn3;
private TextView tv;
private ProgressBar pb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv = findViewById(R.id.wv);
btn1 = findViewById(R.id.btn1);
btn2 = findViewById(R.id.btn2);
btn3 = findViewById(R.id.btn3);
tv = findViewById(R.id.tv);
pb = findViewById(R.id.pb);
//加载assets目录下的html文件
wv.loadUrl("file:///android_asset/js_android.html");
WebSettings settings = wv.getSettings();
//是支持显示放大缩小的工具
settings.setBuiltInZoomControls(true);
//settings.setJavaScriptCanOpenWindowsAutomatically(true);
//设置是否支持Js
settings.setJavaScriptEnabled(true);
//映射 2.别名
wv.addJavascriptInterface(new JSInterface(), "text");
//必加
wv.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
//设置当前网页加载的进度
pb.setProgress(newProgress);
super.onProgressChanged(view, newProgress);
}
@Override
public void onReceivedTitle(WebView view, String title) {
//访问标题
tv.setText(title);
super.onReceivedTitle(view, title);
}
});
wv.setWebViewClient(new WebViewClient(){
//开始加载
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
pb.setVisibility(View.VISIBLE);
super.onPageStarted(view, url, favicon);
}
//结束加载
@Override
public void onPageFinished(WebView view, String url) {
pb.setVisibility(View.GONE);
super.onPageFinished(view, url);
}
});
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//调取Js的方法进行传旨
wv.loadUrl("javascript:androidCallJs('啦啦啦啦、啦啦啦啦')");
}
});
//加载百度页面的点击事件
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wv.loadUrl("http://www.baidu.com");
}
});
//返回上一页
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wv.goBack();
}
});
}
//设置手机返回键为返回上一页网站
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
wv.goBack();//调用goBack()返回WebView的上一页面
return true;
}
return false;
}
private final class JSInterface{
//定义一个接受值的方法
//通过注解的方式向JS暴露一个接口 可以调到android里的方法
//注意这里的@JavascriptInterface注解, target是4.2以上都需要添加这个注解,否则无法调用
@JavascriptInterface
public void showToast(String name) {
Toast.makeText(MainActivity.this, name, Toast.LENGTH_LONG).show();
}
}
}