Android WebView系列文章2-WebView和js交互

Android WebView系列文章2-WebView和js交互。

1.WebView和Js交互的幾種方式

Android去調用JS的代碼
JS去調用Android的代碼

對於android調用JS代碼的方法有2種:

1. 通過WebView的loadUrl()
2. 通過WebView的evaluateJavascript()

對於JS調用Android代碼的方法有3種:

1. 通過WebView的addJavascriptInterface()進行對象映射
2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調攔截 url
3. 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回調攔截JS對話框alert()、confirm()、prompt()消息

2. Android調用JS腳本
對於Android調用JS代碼的方法有2種:

- 通過WebView的loadUrl()
- 通過WebView的evaluateJavascript()
**通過WebView的evaluateJavascript()**

優點:該方法比第一種方法效率更高、使用更簡潔。
1. 因為該方法的執行不會使頁面刷新,而第一種方法(loadUrl )的執行則會。
2. Android 4.4 後才可使用

//隻需要將第一種方法的loadUrl()換成下面該方法即可
mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {
  @Override
  public void onReceiveValue(String value) {
    //此處為 js 返回的結果
  }
});

**通過WebView的loadUrl()**

直接Webview調用loadUrl方法,裡面是JS的方法名,並可以傳入參數,javascript:xxx()方法名需要和JS方法名相同
contentWebView.loadUrl("javascript:javacalljs()");

HTML代碼
Paste_Image.png

使用建議

兩種方法混合使用,即Android 4.4以下使用方法1,Android 4.4以上方法2

//Android版本變量
final int version = Build.VERSION.SDK_INT;
//因為該方法在 Android 4.4 版本才可使用,所以使用時需進行版本判斷
if (version < 18) {
  mWebView.loadUrl("javascript:callJS()");
} else {
  mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {
    @Override
    public void onReceiveValue(String value) {
      //此處為 js 返回的結果
    }
  });
}

3. JS調用Android方法
在Java代碼中添加下面這句,webview綁定javascriptInterface,js腳本通過這個接口來調用java代碼, 第一個參數是自定義類對象,映射成JS對象,這裡我直接傳this,第二個參數是別名,JS腳本通過這個別名來調用java的方法,這個別名跟HTML代碼中也是對應的

contentWebView.addJavascriptInterface(MainActivity.this,"android");

HTML代碼
Paste_Image.png

4.Android 調用HTML中的javascript腳本並傳遞參數

WebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");

HTML代碼

Paste_Image.png

5. HTML中的javascript腳本調用Android本地代碼並傳遞參數

Android Java代碼
@JavascriptInterface
public void startFunction(final String text){
  runOnUiThread(new Runnable() {
    @Override
    public void run() {
      new AlertDialog.Builder(WebViewFiftyActivity.this).setMessage(text).show();
    }
  });
}

HTML代碼
function javacalljswith(arg){
  document.getElementById("content").innerHTML =
    ("
"+arg); }

6.案例:H5頁面點擊圖片監聽圖片鏈接地址

settings.setJavaScriptEnabled(true);
wv_view.addJavascriptInterface(new ImageJs(this),"imageListener");

/**打開圖片js通信接口*/
private class ImageJs {
  private final Activity activity;
  public ImageJs(Activity activity) {
    this.activity = activity;
  }
  // 下面的@SuppressLint("JavascriptInterface")最好加上。防止在某些版本中js和java的交互不支持。
  //@SuppressLint("JavascriptInterface")
  @android.webkit.JavascriptInterface
  public void openImage(String img) {
    Log.i("url地址","圖片"+ img);
    **//跳轉頁面**
  }
}

/**添加圖片點擊事件的js代碼,網上找到,就是這樣寫,不需要明白*/
private void addImageClickListner() {
  String jsCode="javascript:(function(){" +
      "var imgs=document.getElementsByTagName(\"img\");" +
      "for(var i=0;i

You May Also Like