Java和JavaScript相互调用
今天我们介绍WebView 和JavaScript是这么相互调用的。
首先我们在assets目录下创建一个js2java的html文件（在AS中创建html的3中方式，https://www.jianshu.com/p/9a74d4700e31），如下图：
屏幕快照.png
html文件的内容也很简单：
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript">
function test(msg){
alert(msg);
}
function toastTest(){
window.wgp.callFromJS("我是JavaScript");
}
</script>
</head>
<body>
<button onclick="test('aa');">test</button>
<button onclick="toastTest();">吐司测试</button>
</body>
</html>
我们在html中定义了两个js方法，test()和toastTest()，然后定义了两个按钮，并定义了点击事件，指向了两个方法。
Android代码中，定义布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/test_js"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="java调用js"/>
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp" />
</LinearLayout>
Activity中的代码如下：
public class JavaJSActivity extends AppCompatActivity {
Button test_js;
WebView web_view;
WebSettings webSettings;
//file:///android_asset/ 这个路径是Android中访问本地asset目录的
String url = "file:///android_asset/js2java";
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_javajs);
web_view = findViewById(R.id.web_view);
test_js = findViewById(R.id.test_js);
init();
}
@SuppressLint("JavascriptInterface")
private void init() {
webSettings = web_view.getSettings();
webSettings.setJavaScriptEnabled(true);
web_view.loadUrl(url);
//java调用js的代码
test_js.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
web_view.loadUrl("JavaScript:test("+"'wgp'"+")");
}
});
//js代码调用Android中的java代码，需要添加两个注解
//@SuppressLint("JavascriptInterface") 和 需要调用的方法加上注解@JavascriptInterface
web_view.addJavascriptInterface(new Object(){
@JavascriptInterface
public void callFromJS(String text){
Toast.makeText(JavaJSActivity.this,text,Toast.LENGTH_SHORT).show();
}
},"wgp");
//设置上这个 我们就可以允许在webview中弹出JS的alert()了
web_view.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
}
}
运行效果.gif
总结：
- 在java中调用JS代码，需要web_view.loadUrl("JavaScript:函数"); 这个格式是固定的，方法名要和JavaScript中的函数名字保持一致，其实就是告诉webview，我是要调用JavaScript中的那个函数。
- JavaScript代码调用java代码， 需要web_view.addJavascriptInterface(object,name),这里面第一个参数是一个对象，这个对象一定要有一个和JavaScript中的方法名字是一样的；name代表javascript中第一个参数中的方法名字之前的名字。说起来有点绕。如上面的代码window.wgp.callFromJS("我是JavaScript"); 这里name必须是wgp，也就是window和方法名之间的这段。
