Android原生WebViewとJavaScriptはインタラクティブです.

5775 ワード
現在の純原生アプリは珍しいです.ほとんどは原生の中に埋め込まれているウェブページのhybirdアプリです.あるいは直接React Nativeを使って開発します.元の生Appでは、埋め込まれたウェブサイトの原生とJavaScriptの相互作用はほとんど避けられません.結局、自分のアプリケーションにウェブページを埋め込むのは、ブラウザとしてだけではありません.AndroidではウェブページをロードするコントロールはWebViewであるため、JavaScriptとの対話も同様にWebViewで実現しなければならない.
関連クラスと主要な方法
ウェストビュー
低いバージョンと高いバージョンのAndroidシステムではWebViewは異なるカーネルを採用しており、Android 4.4以降はそのままChromeのカーネルを使用している.常用方法:
//   url        
webView.loadUrl(String url);

//   HTML        ,   loadData()     data          %，#，\，?     ，       
webView.loadData(String data,String mimeType,String encoding);
webView.loadDataWithBaseUrl(String baseUrl,String mimeType,String encoding,String historyUrl);

// webView       ，          
webView.onResume();

// webView       ，               
//    pause     WebView         ，       JavaScript    
webView.onPause();

//     WebView   layout、parsing、JavaScriptTimers     CPU   （    ）
webView.pauseTimers();

//    pauseTimers      
webView.resumeTimers();

//      WebView      WebView           
parentLayout.removeView(webView);
webView.destroy();

//           (      ，                         )
webView.canGoBack();

//    
webView.goBack();

//           
webView.canGoForward();

//    
webView.goForward();

//            steps    (    ，    )
webView.goBackOrForward(int steps);
WebSetting
WebSettingは、WebViewのための構成と管理を提供する抽象的なクラスであり、webView.get Settings()の方法によってインスタンスを取得する.常用方法:
//    webView      JavaScript    （         JS          true）
webSettings.setJavaScriptEnabled(true);

//        JS      (function window.open())
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

//    webView       
webSettings.setPluginsEnable(true);

//       

//          ，（             ）
webSettings.setUseWideViewPort(true); //         webView    
webSettings.setLoadWithOverviewMode(true); //        （           PC   ）

//         ，     
webSettings.setSupportZoom(true);
//          
webSettings.setBuiltInZoomControls(true);
//          
webSettings.setDisplayZoomControls(true);
WebView Cient
WebView Cientは主にWebViewのために要求された各種状態イベントを処理するために用いられます.常用方法:
//            
onPageStarted(WebView view, String url, Bitmap favicon);
//          
onPageFinished(WebView view, String url)；
//          ，           
onLoadResource(WebView view, String url);
//       404      
onReceivedError(WebView view, WebResourceRequest request, WebResourceError error);
webViewデフォルトではhttps要求をロードしません.ページに空白が表示されます.httpsページをロードするには以下のような設定が必要です.
webView.setWebViewClient(new WebViewClient() {    
        @Override    
        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {    
            handler.proceed();    //        
        // handler.cancel();      //      ，     
        // handler.handleMessage(null);    //      
        }    
    });
WebChromeCient
補助WebViewはJavaScriptダイアログを処理して、進捗、ウェブアイコンなどをロードします.常用方法:
//       
onProgressChanged(WebView view, int newProgress);
//       Title   
onReceivedTitle(WebView view, String title);
//          
onReceivedIcon(WebView view, Bitmap icon);
WebViewの使用
前の理解を通じて、WebViewと彼の補助類のいくつかの基本的な方法は分かりました.次にWebViewの使い方とWebViewの使い方、AndroidソースコードとJavaScriptコードの相互作用を見てみます.
JS呼び出し元の方法
JSはソースのメソッドを呼び出す時に、この方法に@Javascript Interfaceの注釈を加えなければならない.我々はカテゴリまたはインターフェースを定義して、JS呼び出しのための方法を単独で保存することができます.ここではインターフェースを例にしています.インターフェースでは、JS呼び出しに提供するためのgetUrl(String url)方法が提供され、Stringタイプの値をソースに渡す方法が提供される.
/**
 * Created by PandaQ on 2017/3/22.
 * JS       
 *              ，       
 */
public interface JavaScriptFunction {
    void getUrl(String string);
}

//        PandaEye        html             Activity        
webView.addJavascriptInterface(new JavaScriptFunction() {
            @Override
            @JavascriptInterface //      getUrl()       JS   
            public void getUrl(String imageUrl) {
                LogWritter.LogStr(imageUrl);
                Intent intent = new Intent();
                intent.putExtra("imageUrls", mImageUrls);
                intent.putExtra("curImageUrl", imageUrl);
                intent.setClass(ZhihuStoryInfoActivity.this, PhotoViewActivity.class);
                startActivity(intent);
            }
        }, "JavaScriptFunction");

//   HTML          JS                       
function(){
    window.JavaScriptFunction.getUrl(this.src);
}
原生コールJS
パンダの目のPanderEyeでは、知乎日報と網易新聞のAPIを使っていますので、HTML bodyデータは自分達でHTMLのシェルを追加して、ソース生に必要なJavaScarpitコードをロードして、私達の機能を実現します.JSをロードして直接webView.load()で完全なJSコードをロードしてもいいです.自分の加えたheadノードでJSファイルを導入してからwebViewで直接loadします.PandEyeでは第二の方法があります.
enter description here
イメージClick.jsの内容は以下の通りです.
function initClick()
{
    var objects = document.getElementsByTagName("img");
    for(var i=0;i
その後、WebChromeCientでロードの進捗が100%に達したら、JSファイルのinitClick()を呼び出す方法で、各ピクチャにクリックイベントを設定します.
    /**
     *             
     *
     * @param webView     WebView
     */
    private void addImageClickListener(WebView webView) {
        webView.loadUrl("javascript:(initClick())()");
    }
直接JSをロードしてinitClick()をJSコードで置き換えればいいです.
Chromeを使ってWebViewをデバッグします.
WebViewのJavaScriptコードのデバッグはAndroid Studioをそのまま使うのはしょうがないです.HTMLページをどうやってデバッグしますか?答えはChromeブラウザでデバッグします.
  • USBオプションは開いています.
  • Chromeブラウザでアドレスを開く:chrome://inspect またはabout:inspectはデバッグするWebViewを開いて、次のようなインターフェースが見られます.
    InspectPage
    対応ページのinspectをクリックしてデバッグページに入ることができます.
    DebugPage
    次の中には前端ページのようにWebViewの内容を調整できます.
    最後に
    コードの詳細はPandenEyeをご覧ください.
    • Javascriptはパスワードの強度を計算します.