WebView与js的交互
2019-11-20 本文已影响0人
KenChen_939
Android与js相互调用的桥梁是WebView
1:Android通过WebView调用js
调用js代码实用的主要方法:通过WebView的evaluateJavascript( )
js代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
h1{
color:red;
}
</style>
</head>
<body>
<h1>Hello World!!!</h1>
<button>test</button>
<script>
function fun1(msg){
document.querySelector("h1").innerHTML=msg
return "Hello:"+msg
}
document.querySelector("button").onclick=function(){
myService.jump();
}
</script>
</body>
</html>
我们即将调用的就是js代码中的fun1方法
在Android中调用方法如下：
实例化WebView之后设置与js交互的权限等：
WebSettings settings=webView.getSettings();
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
settings.setJavaScriptEnabled(true);
之后设置按钮的点击事件:
webView.evaluateJavascript("javascript:fun1('JohnYu')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this,value,Toast.LENGTH_LONG).show();
}
});
这样在点击按钮的时候就会调用js代码中的方法了
2:js调用Android
使用的方法为WebView中的addJavascriptInterface（）进行对象映射
首先要创建一个与JS对象映射关系的Android类
public class MyService {
private Context context;
//传入Activity对象
public MyService(Context context) {
this.context = context;
}
@JavascriptInterface
public String work(String s){
return "Hello:"+s;
}
@JavascriptInterface
public void jump(){
Intent intent=new Intent();
intent.setClass(context,OtherActivity.class);
context.startActivity(intent);
}
}
2:在js代码中写相应的方法，代码上面已经给过了
3:在webview中使用：
webView.loadUrl("http://johnyu.cn/my.html");
webView.addJavascriptInterface(new MyService(this),"myService");
全部代码：
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView =findViewById(R.id.web);
WebSettings settings = webView.getSettings();
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
settings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new MyService(this),"myService");
webView.loadUrl("http://johnyu.cn/my.html");
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void call(View view) {
webView.evaluateJavascript("javascript:fun1('JohnYu')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this,value,Toast.LENGTH_LONG).show();
}
});
}
}
<?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"
tools:context=".MainActivity" android:orientation="vertical">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="0dp" android:layout_weight="1">
</WebView>
<Button
android:onClick="call"
android:text="call"
android:layout_width="match_parent"
android:layout_height="wrap_content"></Button>
</LinearLayout>
