Webview和JS交互方式
前言
- 現(xiàn)在很多App里都內(nèi)置了Web網(wǎng)頁（Hybrid App），比如說很多電商平臺，淘寶，京東等等
webview_and_JS.png
1. 交互方式總結(jié)
Android與JS通過Webview互相調(diào)用方法，
- android去調(diào)用JS的代碼
- JS去調(diào)用Android的代碼
兩者溝通的橋梁是WebView
對于Android調(diào)用JS代碼的方法有2種：
- 通過WebView的loadUrl（）
- 通過WebView的evaluateJavascript()
對于JS調(diào)用Android代碼方法有3種：
- 通過WebView的addJavascriptInterface（）進(jìn)行對象映射
- 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調(diào)攔截 url
- 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調(diào)攔截JS對話框alert()、confirm()、prompt（） 消息
2. 交互方式
對于Android調(diào)用JS代碼的方法有2種：
- 通過WebView的loadUrl（）
- 通過WebView的evaluateJavascript（）
方式1：通過WebView的loadUrl（）
- 實例介紹：點擊Android按鈕，即調(diào)用WebView JS（文本名為javascript）中callJS（）
步驟1：將需要調(diào)用的JS代碼以.html格式放到src/main/assets文件夾里
1.為了方便展示，本文是采用Andorid調(diào)用本地JS代碼說明；
2.實際情況時，Android更多的是調(diào)用遠(yuǎn)程JS代碼，即將加載的JS代碼路徑改成url即可
需要加載JS代碼：javascript.html
// 文本名：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
// JS代碼
<script>
// Android需要調(diào)用的方法
function callJS(){
alert("Android調(diào)用了JS的callJS方法");
}
</script>
</head>
</html>
步驟2：在Android里通過WebView設(shè)置調(diào)用JS代碼
public class MainActivity extends AppCompatActivity {
WebView mWebView;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView =(WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
// 設(shè)置與Js交互的權(quán)限
webSettings.setJavaScriptEnabled(true);
// 設(shè)置允許JS彈窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 先載入JS代碼
// 格式規(guī)定為:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 必須另開線程進(jìn)行JS方法調(diào)用(否則無法調(diào)用)
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意調(diào)用的JS方法名要對應(yīng)上
// 調(diào)用javascript的callJS()方法
mWebView.loadUrl("javascript:callJS()");
}
});
}
});
// 由于設(shè)置了彈窗檢驗調(diào)用結(jié)果,所以需要支持js對話框
// webview只是載體，內(nèi)容的渲染需要使用webviewChromClient類去實現(xiàn)
// 通過設(shè)置WebChromeClient對象處理JavaScript的對話框
//設(shè)置響應(yīng)js 的Alert()函數(shù)
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
}
}
方式2：通過WebView的evaluateJavascript（）
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此處為 js 返回的結(jié)果
}
});
}
