目錄:
1、打開項目的asset目錄,創建新的文件test.html
2、補充html代碼:添加供本地調用的js方法、調用本地方法的js代碼
3、補充java代碼:本地加載js代碼、提供給js調用的方法
一、整體思路
首先在項目assets目錄底下創建一個html文件或者直接自己寫好了然后復制到這個目錄底下,然后本地通過WebView將html加載到頁面進來,接着可以通過在html文件中增加js方法,然后本地java文件去調用js方法;也可以先在本地Java文件寫好提供給js調用的方法代碼,然后在html文件中調用java方法,從而實現WebView與JavaScript的相互調用。
畢竟我只是初學者,js只懂皮毛,因此下面做了一個很簡單的例子供大家參考。
二、簡單例子實現過程
1、打開項目的asset目錄,創建新的文件test.html
(1)在項目文件處右鍵new->folder->Assets folder->Ok:
(2)接着在assets目錄處右鍵new->new File,文件名可以為test.html:
2、補充html代碼:添加供本地調用的js方法、調用本地方法的js代碼
<html>
<body>
<br><br>
<a><h1>js中調用本地方法</h1></a>
<script>
function sayHello()
{
alert("Hello")
}
var aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click', function(){
//調用android本地方法
control.toastMessage("js中調用本地方法");
return false;
}, false);
</script>
</body>
</html>
3、補充java代碼:本地加載js代碼、提供給js調用的方法
(1)布局簡單如下:
<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:background="#bbe4fb"
android:orientation="vertical"
android:paddingBottom="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
tools:context="com.example.suqh.webviewjs1.MainActivity">
<Button
android:id="@+id/btn_show"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="本地調用js方法" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
(2)MainActivity.java代碼如下:
import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private Button btnShow;
private WebView webView;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initEvent();
}
private void initView() {
btnShow = (Button) findViewById(R.id.btn_show);
webView = (WebView) findViewById(R.id.webView);
}
private void initData() {
webView.setWebChromeClient(new WebChromeClient());
WebSettings set = webView.getSettings();
//設置webview支持js
set.setJavaScriptEnabled(true);
//設置本地調用對象及其接口
webView.addJavascriptInterface(new JsInteraction(), "control");
webView.loadUrl("file:///android_asset/test.html");
}
private void initEvent() {
btnShow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//本地調用js方法
webView.loadUrl("javascript:sayHello()");
}
});
}
public class JsInteraction {
@JavascriptInterface
public void toastMessage(String message) { //提供給js調用的方法
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
}
}
}
4、效果圖
點擊“本地調用js方法”按鈕(左下圖),點擊頁面上的文字“js調用本地方法”(右下圖):