利用HTML5開發Android筆記（中篇）

iSmart-艾思www.smartmobi.com.cn

● Android與JS之間的互相調用交互

WebView默認是禁用JavaScript的，在啓用後，就可以在兩者間建立接口進行調用

 

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

 

（這裏的webSetting用處非常大 可以開啓很多設置 在之後的本地存儲，地理位置等之中都會使用到）

 

1 在JS中調用Android的函數方法

 

首先 需要在Android程序中建立接口

 

final class InJavaScript {
       public void runOnAndroidJavaScript(final String str) {
        handler.post(new Runnable() {
               public void run() {
                   TextView show = (TextView) findViewById(R.id.textview);
                   show.setText(str);
               }
           });
       }
   }

 

 

 

//把本類的一個實例添加到js的全局對象window中，
//這樣就可以使用window.injs來調用它的方法
webView.addJavascriptInterface(new InJavaScript(), “injs”);

 

在JavaScript中調用

 

function sendToAndroid(){
        var str = “Cookie call the Android method from js”;
        window.injs.runOnAndroidJavaScript(str);//調用android的函數
}

 

2 在Android中調用JS的方法

 

在JS中的方法：

 

function getFromAndroid(str){
        document.getElementById(“android”).innerHTML=str;
}

 

在Android調用該方法

 

Button button = (Button) findViewById(R.id.button);
       button.setOnClickListener(new OnClickListener() {
       public void onClick(View arg0) {
            //調用javascript中的方法
           webView.loadUrl(“javascript:getFromAndroid(‘Cookie call the js function from Android’)”);
       }
   });

 

3 Android中處理JS的警告，對話框等

在Android中處理JS的警告，對話框等需要對WebView設置WebChromeClient對象

 

//設置WebChromeClient
webView.setWebChromeClient(new WebChromeClient(){
    //處理javascript中的alert
    public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
        //構建一個Builder來顯示網頁中的對話框
        Builder builder = new Builder(MainActivity.this);
        builder.setTitle(“Alert”);
        builder.setMessage(message);
        builder.setPositiveButton(android.R.string.ok,
            new AlertDialog.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) {
                    result.confirm();
                }
            });
        builder.setCancelable(false);
        builder.create();
        builder.show();
        return true;
    };
    //處理javascript中的confirm
    public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
        Builder builder = new Builder(MainActivity.this);
        builder.setTitle(“confirm”);
        builder.setMessage(message);
        builder.setPositiveButton(android.R.string.ok,
            new AlertDialog.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) {
                    result.confirm();
                }
            });
        builder.setNegativeButton(android.R.string.cancel,
            new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) {
                    result.cancel();
                }
            });
        builder.setCancelable(false);
        builder.create();
        builder.show();
        return true;
    };

    @Override
    //設置網頁加載的進度條
    public void onProgressChanged(WebView view, int newProgress) {
        MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);
        super.onProgressChanged(view, newProgress);
    }

    //設置應用程序的標題title
    public void onReceivedTitle(WebView view, String title) {
        MainActivity.this.setTitle(title);
        super.onReceivedTitle(view, title);
    }
});

 

● Android中的調試

通過JS代碼輸出log信息

 

Js代碼： console.log(“Hello World”);
Log信息： Console: Hello World http://www.example.com/hello.html :82

 

在WebChromeClient中實現onConsoleMesaage()回調方法，讓其在LogCat中打印信息

 

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    public void onConsoleMessage(String message, int lineNumber, String sourceID) {
        Log.d(“MyApplication”, message + “ – From line ”
            + lineNumber + “ of ”
            + sourceID);
    }
});

以及

 

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d(“MyApplication”, cm.message() + “ – From line ”
            + cm.lineNumber() + “ of ”
            + cm.sourceId() );
        return true;
    }
});

 

*ConsoleMessage 還包括一個 MessageLevel 表示控制檯傳遞信息類型。 您可以用messageLevel()查詢信息級別，以確定信息的嚴重程度，然後使用適當的Log方法或採取其他適當的措施。