webViewとjsの相互作用の方式

7523 ワード

インタラクティブ方式のまとめ
  • AndroidがJS方法を呼び出す2つの方法
  • .
  • は、WebViewのloadUrl()方式を通じて.
  • WebViewのevaluate Javascript()方式を通じて.
  • JSがAndroidを呼び出す3つの方法
  • .
  • は、WebViewのaddJavascript Interface()を介してオブジェクトのマッピングを行う
  • .
  • WebView CientのショルダーdOverrideUrlLoading()方法によってブロックをリピートする
  • .
  • WebChromeClientのonJsAlert()、onJs Confirm()、onJs Propt()方法でJSダイアログalert()、confirm()、prompt()メッセージ
  • をリセットします.
    AndroidはJS方法の2つの方法を呼び出して具体的に分析します.
    WebViewのloadUrl方式で
    1.地元のhtmlファイルでプレゼンテーションがしやすい
  • ローディングが必要なローカルjs.
  • 
    
    
    
        
        Carson_Ho
    
    
        
    // Android       
       function callJS(){
          alert("Android   JS callJS  ");
       }
       function callAndroid(){
            test.hello("js   Android  hello  ");
       }
       function callAndroidofOverrideloadurl(){
            document.location = "js://webview?arg1=111&arg2=222";
       }
       function returnResult(result){
            alert("android return result:"+result);
       }
       function clickprompt(){
            var result=prompt("js://demo?arg1=111&arg2=222");
            alert("demo:" + result);
       }
    
    
    
    
        
        
        
    
    
    
  • Android端末のコードは以下の通りです.
    package com.example.webview;
    
    import android.app.AlertDialog;
    import android.content.DialogInterface;
    import android.net.Uri;
    import android.os.Build;
    import android.os.Bundle;
    import android.support.annotation.RequiresApi;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.webkit.JsPromptResult;
    import android.webkit.JsResult;
    import android.webkit.ValueCallback;
    import android.webkit.WebChromeClient;
    import android.webkit.WebResourceRequest;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.Button;
    
    import java.io.UnsupportedEncodingException;
    import java.net.URLDecoder;
    import java.util.HashMap;
    import java.util.Set;
    
    public class MainActivity extends AppCompatActivity {
    
        WebView mWebView;
        Button callJSButton;
        Button returnResultJs;
        int version = Build.VERSION.SDK_INT;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mWebView = (WebView) findViewById(R.id.webview);
            returnResultJs = (Button) findViewById(R.id.return_result);
    
            WebSettings webSettings = mWebView.getSettings();
            webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
            webSettings.setJavaScriptEnabled(true);
    
            mWebView.addJavascriptInterface(new AndroidtoJs(MainActivity.this),"test");
            mWebView.loadUrl("file:///android_asset/js.html");
    
            mWebView.setWebViewClient(new WebViewClient(){
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    Uri uri = Uri.parse(url);
                    if(uri.getScheme().equals("js")){
                        if(uri.getAuthority().equals("webview")){
                            HashMap params = new HashMap<>();
                            Set collection = uri.getQueryParameterNames();
                            String arg1 = collection.toString();
                        }
                    }
                    return super.shouldOverrideUrlLoading(view, url);
                }
            });
            returnResultJs.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int result = 100;
                    mWebView.loadUrl("javascript:returnResult(" +"\"" + result + "\"" + ")");
    //                int version = Build.VERSION.SDK_INT;
    //                if(version <19){
    //                    mWebView.loadUrl("javascript:returnResult(" + "faffdsfsfsafdasdfds" + ")");
    //                }else{
    //                    mWebView.evaluateJavascript("javascript:returnResult(" + "faffdsfsfsafdasdfds" + ")", new ValueCallback() {
    //                        @Override
    //                        public void onReceiveValue(String value) {
    //
    //                        }
    //                    });
    //                }
                }
            });
    
            callJSButton = (Button) findViewById(R.id.call_js);
            callJSButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mWebView.post(new Runnable() {
                        @Override
                        public void run() {
                            int version = Build.VERSION.SDK_INT;
                            if(version <19){
                                mWebView.loadUrl("javascript:callJS()");
                            }else{
                                mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {
                                    @Override
                                    public void onReceiveValue(String value) {
    
                                    }
                                });
                            }
                        }
                    });
                }
            });
    
            mWebView.setWebChromeClient(new WebChromeClient(){
                @Override
                public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                    AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                    builder.setTitle("MY WEBVIEW ALERT");
                    builder.setMessage(message);
                    builder.setPositiveButton("  ", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    });
                    builder.setCancelable(false);
                    builder.create().show();
                    return true;
                }
    
                @Override
                public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    
                    Uri uri = Uri.parse(message);
                    if ( uri.getScheme().equals("js")) {
    
                        //    authority  =          webview,           
                        //     url,  JS    Android     
                        if (uri.getAuthority().equals("demo")) {
    
                            //
                            //   JS        
                            System.out.println("js   Android   ");
                            //               Android 
                            HashMap params = new HashMap<>();
                            Set collection = uri.getQueryParameterNames();
    
                            //  result:         (   )
                            result.confirm("js   Android      ");
                        }
                        return true;
                    }
                    return super.onJsPrompt(view, url, message, defaultValue, result);
                }
            });
        }
    }