WebView与Js交互

使用场景

        在页面布局很复杂并且是动态的时候，比如很多电商平台的宣传页面等；

交互方式

1. Android去调用JS的代码
2. JS去调用Android的代码

实例

• android端代码

public class NativeJSCs extends AppCompatActivity {

  private WebView web;
  private String yaoQingMa = "YAOQINGMA";
 //String nativeUrl = "https://www.jianshu.com/sign_in"; //互联网页面直接用
  String nativeUrl = "file:///android_asset/web.html";  //本地文件用(本地文件存放在：assets文件中)
 //String htmlString = "
Title
This is HTML text
Formatted in italics
Anothor Line
";  //直接载入html的字符串

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.native_js_cs);
    initView();
  }

  private void initView() {
    web = (WebView) findViewById(R.id.web_js);
    //必须支持JavaScript脚本
    web.getSettings().setJavaScriptEnabled(true);
    //为js回调Android方法做准备（绑定别名）
    web.addJavascriptInterface(new NativeJSCs.JavaScriptInterface(), "android");
    // 设置允许JS弹窗
    web.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    web.clearCache(true);
    // 加载html
    web.loadUrl(nativeUrl);
    web.setWebViewClient(new WebViewClient() {

      @Override public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        //Android调用js带参方法,需特别注意  单引号 ‘’ 的使用
        loadUrl("javascript:androidCallJs('" + "Android->成功" + "')");
      }

      @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
       //view.loadUrl(url); //return true时，添加该方法webView中的超链接才可以进行二次跳转访问
      //返回true代表当前应用来处理url，返回false则代表当前webview来处理url
      //（若webview来处理，在数据获取失败时，与view.loadUrl(url);现象不同的是，它不会跳转到新页面）
      return false;
      }
    });
  }

  private void loadUrl(String url) { //仅用于js交互使用
    if (Build.VERSION.SDK_INT < 19) { // Android版本变量
    //采用无返回结果的调用js方法
      web.loadUrl(url);
    } else {
      //采用有返回结果的调用js方法
      web.evaluateJavascript(url, new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
          //注意：此处为 js 返回的结果
        }
      });
    }
  }


  public void onClicked(View v) {
    String url = "javascript:android.startFunction(androidCallJs('" + "Android->Js->Android 成功" + "'));";
    loadUrl(url);
    loadUrl("javascript:androidCallJs('" + "are you superman ???" + "')");
  }

  /**
   * 用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，
   * 如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
   **/
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    super.onKeyDown(keyCode, event);
    if ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) {
      web.goBack(); //goBack()表示返回WebView的上一页面
      finish();
      return true;
    }
    return true;
  }

  private class JavaScriptInterface {
     @JavascriptInterface  // Android 4.4后必要注解，用于提高安全性
     public void startFunction() {  //js回调Android方法, Toyun.callCamera()；
       Toast.makeText(NativeJSCs.this, "js回调Android成功！", Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface 
    public void startFunction(final String result) {
        //对界面进行修改时必须在UI线程进行，即便它是Html的界面，因此可以用handler或如下方法去更新UI
       runOnUiThread(new Runnable() {
        @Override public void run() {
          Toast.makeText(NativeJSCs.this, result, Toast.LENGTH_SHORT).show();
        }
      });
    }
  }
}

• js代码

    
    


HTML 内容显示: 


    
content












 

其它

• WebViewClient与WebChromeClient的区别

  1. WebViewClient主要帮助WebView处理各种通知、请求事件的，比如：
     onLoadResource
     onPageStart
     onPageFinish
     onReceiveError
     onReceivedHttpAuthRequest

  2. WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，比如
     onCloseWindow(关闭WebView)
     onCreateWindow()
     onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)
     onJsPrompt
     onJsConfirm
     onProgressChanged
     onReceivedIcon
     onReceivedTitle

  小结：如果你的WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。
  当然，你也可以都用，详情网址：http://blog.csdn.net/wang1897b7/article/details/53559146。

• 更详细的Android WebView与 JS 的交互方式介绍：

  1. https://www.jianshu.com/p/345f4d8a5cfa
  2. https://www.cnblogs.com/tianzhijiexian/p/4215527.html

.