WebView之javascript與android交互基礎增強

時間 2019-11-12

標籤 webview javascript android 交互基礎增強欄目 JavaScript 简体版

原文原文鏈接

1、什麼是js與android交互？javascript

　　通俗一點就是使用js代碼調用java代碼，或者使用java代碼調用js代碼。html

2、爲何要使用js與java代碼交互？java

　　1.能夠作一些js網頁作自己處理不了的事情。例如：在網頁上調用Android本地打電話，發短信功能、在網頁上調用Android手機通信錄、在網頁上調用第三方應用、在網頁上調用一些Android的本地化處理（操做IO，數據庫）等。android

　　2.能夠實現js開發人員與android開發人員合做開發。例如：js開發人員開發js代碼供android開發人員調用，android開發人員就沒必要寫js代碼，能夠專一於andrid開發，用到js的時候直接調用js代碼就能夠了。（反之亦然）web

　　3.能夠實現網頁的動態更新。例如：能夠利用js代碼調用java的更新數據顯示到網頁上以達到動態更新網頁的目的。數據庫

3、js代碼調用java代碼操做步驟瀏覽器

　　1.開啓使用js功能app

webSettings.setJavaScriptEnabled(true);

　　2.設置編碼默認編碼格式（編碼格式要和html編碼格式對應）ide

webSettings.setDefaultTextEncodingName("gbk");

　　3.注入提供的java對象到webView：主要是這段代碼，解釋一下，第一個參數定義了一個對象，該對象中能夠寫任意的方法，供js代碼調用。第二個參數是該自定義對象的一個別名。js調用該對象的方法時會使用到該別名。調用格式爲：對象名.方法名。例如：jsobject.androidAlert();調用android的alert對話框。函數

webView.addJavascriptInterface(new JsObject(), "jsobject");

　　4.設置WebChromeClient對象，並實現其中的onJsAlert、onJsConfirm等方法。注意這裏必需要實現這幾個方法，否則js調用java代碼彈框時可能沒有反應。

　　　　　　　@Override
            public boolean onJsAlert(WebView view, String url, String message,
                    JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsAlert(view, url, message, result);
            }

            @Override
            public boolean onJsConfirm(WebView view, String url,
                    String message, JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsConfirm(view, url, message, result);
            }

            @Override
            public boolean onJsPrompt(WebView view, String url, String message,
                    String defaultValue, JsPromptResult result) {
                // TODO Auto-generated method stub
                return super.onJsPrompt(view, url, message, defaultValue,
                        result);
            }

4、android代碼調用js代碼

　　這個相對比較簡單，只須要一行代碼就能搞定：

　　例如：

//android調用js代碼
webView.loadUrl("javascript:test_alert()");

作完以上幾步後就能夠實現真正調用了。下面給出完整代碼

1、HTML代碼jshtml.html（改代碼放在assets文件夾下）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
    <title>這是一個HTML</title>  
  
    <script type="text/javascript">  
         /*js調用android的方法*/  
          function jsCallAndroidAlert(){
              jsobject.androidAlert();
          }

        function test_alert() {  
        /* 彈出對話框 */  
            alert("啊哈！連Android系統都調用JS函數了");  
        }  

    </script>  
</head>  
    <body>  
        <button onclick="jsCallAndroidAlert()">test</button>  
        <button onclick="test_alert()">test_alert</button>    
    </body>  
</html>

2、MainActivity.java

package com.yw.webkitdemo;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.graphics.Bitmap;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.Toast;

@SuppressLint("JavascriptInterface")
public class MainActivity extends Activity implements android.view.View.OnClickListener{
    private WebView webView;
    private ProgressBar progressBar;
    private Button btn_js;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
        btn_js = (Button)findViewById(R.id.btn_js);
        btn_js.setOnClickListener(this);
        progressBar = new ProgressBar(this, null,
                android.R.attr.progressBarStyleHorizontal);
        progressBar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
                5));

        webView = (WebView) findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        // 啓用javascrip功能
        webSettings.setJavaScriptEnabled(true);
        //設置可使用中文，不然會出現中文亂碼
        webSettings.setDefaultTextEncodingName("gbk");
        webView.addView(progressBar);
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress == 100) {
                    progressBar.setVisibility(View.GONE);
                } else {
                    if (progressBar.getVisibility() == View.GONE)
                        progressBar.setVisibility(View.VISIBLE);
                    progressBar.setProgress(newProgress);
                }
                super.onProgressChanged(view, newProgress);
            }

            @Override
            public boolean onJsAlert(WebView view, String url, String message,
                    JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsAlert(view, url, message, result);
            }

            @Override
            public boolean onJsConfirm(WebView view, String url,
                    String message, JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsConfirm(view, url, message, result);
            }

            @Override
            public boolean onJsPrompt(WebView view, String url, String message,
                    String defaultValue, JsPromptResult result) {
                // TODO Auto-generated method stub
                return super.onJsPrompt(view, url, message, defaultValue,
                        result);
            }
        });
        /*
         * 此段代碼在不作處理的狀況下會彈出多個瀏覽器選擇界面 webView.loadUrl("http://www.baidu.com/");
         */
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }
        });
//         webView.loadUrl("http://www.baidu.com/");
        /**
         * 自定義對象，以及對象別名
         * 自定義對象中定義的方法能夠供js調用
         * function jsCallAndroidAlert(){
              jsobject.androidAlert();
              }
         */
        webView.addJavascriptInterface(new JsObject(), "jsobject");
        //加載咱們自定義的html網頁並將其顯示在webView上
        webView.loadUrl("file:///android_asset/jshtml.html");
    }

    /**
     * 此類的方法對應html中js的方法，供js調用Android的方法
     * 
     * @author Administrator
     * 
     */
    class JsObject {
        public void androidAlert() {
            AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
            dialog.setTitle("舒適提示");
            dialog.setMessage("js調用了Android的Alert，測試完畢是否退出？");
            dialog.setNegativeButton("否", new OnClickListener() {
                
                @Override
                public void onClick(DialogInterface arg0, int arg1) {
                    
                }
            });
            dialog.setPositiveButton("是", new OnClickListener() {
                
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                }
            });
            AlertDialog dialog2 = dialog.create();
            dialog2.show();
            Toast.makeText(MainActivity.this, "您使用js調用了alert方法",
                    Toast.LENGTH_LONG).show();
        }

        public void androidConfirm() {
            Toast.makeText(MainActivity.this, "您使用js調用了confirm方法",
                    Toast.LENGTH_LONG).show();
        }
    }

    /**
     * 對系統的back鍵進行設置
     */
    @Override
    public void onBackPressed() {
        if (webView != null && webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }

    }

    @Override
    public void onClick(View v) {
        switch(v.getId()){
        case R.id.btn_js:
            //android調用js代碼
            webView.loadUrl("javascript:test_alert()");
            break;
        }
    }
}

3、main_layout.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn_js"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="調用javascript函數" />

</LinearLayout>

完成。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。