Java和JavaScript相互調(diào)用
今天我們介紹WebView 和JavaScript是這么相互調(diào)用的。
首先我們?cè)赼ssets目錄下創(chuàng)建一個(gè)js2java的html文件（在AS中創(chuàng)建html的3中方式，http://m.itdecent.cn/p/9a74d4700e31），如下圖：
屏幕快照.png
html文件的內(nèi)容也很簡單：
<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>
我們?cè)趆tml中定義了兩個(gè)js方法，test()和toastTest()，然后定義了兩個(gè)按鈕，并定義了點(diǎn)擊事件，指向了兩個(gè)方法。
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調(diào)用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/ 這個(gè)路徑是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調(diào)用js的代碼
test_js.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
web_view.loadUrl("JavaScript:test("+"'wgp'"+")");
}
});
//js代碼調(diào)用Android中的java代碼，需要添加兩個(gè)注解
//@SuppressLint("JavascriptInterface") 和 需要調(diào)用的方法加上注解@JavascriptInterface
web_view.addJavascriptInterface(new Object(){
@JavascriptInterface
public void callFromJS(String text){
Toast.makeText(JavaJSActivity.this,text,Toast.LENGTH_SHORT).show();
}
},"wgp");
//設(shè)置上這個(gè) 我們就可以允許在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);
}
});
}
}
運(yùn)行效果.gif
總結(jié)：
- 在java中調(diào)用JS代碼，需要web_view.loadUrl("JavaScript:函數(shù)"); 這個(gè)格式是固定的，方法名要和JavaScript中的函數(shù)名字保持一致，其實(shí)就是告訴webview，我是要調(diào)用JavaScript中的那個(gè)函數(shù)。
- JavaScript代碼調(diào)用java代碼， 需要web_view.addJavascriptInterface(object,name),這里面第一個(gè)參數(shù)是一個(gè)對(duì)象，這個(gè)對(duì)象一定要有一個(gè)和JavaScript中的方法名字是一樣的；name代表javascript中第一個(gè)參數(shù)中的方法名字之前的名字。說起來有點(diǎn)繞。如上面的代碼window.wgp.callFromJS("我是JavaScript"); 這里name必須是wgp，也就是window和方法名之間的這段。
