轉 【Android】- Android與html5交互操作

轉自： https://blog.csdn.net/baidu_35701759/article/details/70314812

 

1. Android提供了WebView控件可訪問網頁

通過webView.loadUrl加載訪問的頁面，通過webView.getSettings()獲得設置，設置WebView的屬性和狀態；

WebViewClient處理應用程序中自定義網頁瀏覽程序，輔助webView通知、請求事件的。

2. WebView常用方法：

/*啟用Javascript*/
webView.getSettings().setJavaScriptEnabled(true);

/*設置是否支持縮放*/
webView.getSettings().setBuiltInZoomControls(true);

/*設置不顯示縮放的圖標*/
webView.getSettings().setDisplayZoomControls(false);

/*設置支持聚焦*/
webView.getSettings().setSupportZoom(true);

/* 設置為使用webView推薦的窗口 */
webView.getSettings().setUseWideViewPort(true);

/* 設置網頁自適應屏幕大小 */
webView.getSettings().setLoadWithOverviewMode(false);

/* HTML5的地理位置服務,設置為true,啟用地理定位 */
webView.getSettings().setGeolocationEnabled(true);

/*不顯示水平欄*/
webView.setHorizontalScrollBarEnabled(false);
webView.setHorizontalFadingEdgeEnabled(false);

/*設置允許webView訪問文件數據*/
webView.getSettings().setAllowFileAccess(true);
/*是否顯示網絡圖片*/
webView.getSettings().setBlockNetworkImage(true);
/*設置緩沖模式*/
webView.getSettings().setCacheMode();
/*設置默認的字體大小*/
webView.getSettings().setDefaultFontSize();

/*設置在解碼時使用的默認編碼*/
webView.getSettings().setDefaultTextEncodingName();
/*設置固定使用的字體*/
webView.getSettings().setFixedFontFamily();
/*設置布局方式*/
webView.getSettings().setLayoutAlgorithm();

3.WebViewClient常用方法：

webView.setWebViewClient(new WebViewClient(){
    /*控制新的連接在當前WebView中打開*/
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(url);
        return super.shouldOverrideUrlLoading(view, request);
    }
    /*更新歷史記錄*/
    @Override
    public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
        super.doUpdateVisitedHistory(view, url, isReload);
    }
    /*應用程序重新請求網頁數據*/
    @Override
    public void onFormResubmission(WebView view, Message dontResend, Message resend) {
        super.onFormResubmission(view, dontResend, resend);
    }
    /*加載指定地址提供的資源*/
    @Override
    public void onLoadResource(WebView view, String url) {
        super.onLoadResource(view, url);
    }
    /*網頁加載完畢*/
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }
    /*網頁開始加載*/
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }
    /*報告錯誤信息*/
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
    }
    /*WebView發生改變*/
    @Override
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
        super.onScaleChanged(view, oldScale, newScale);
    }
});

4.WebChromeClient常用方法：

webView.setWebChromeClient(new WebChromeClient(){
    /*創建WebView*/
    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
        return super.onCreateWindow(view, isDialog, isUserGesture, resultMsg);
    }
    /*關閉WebView*/
    @Override
    public void onCloseWindow(WebView window) {
        super.onCloseWindow(window);
    }
    /*處理Javascript中的Alert對話框*/
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
    /*處理Javascript中的Confirm對話框*/
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        return super.onJsConfirm(view, url, message, result);
    }
    /*處理Javascript中的Prompt對話框*/
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
    /*加載進度條改變*/
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
    }
    /*網頁圖標更改*/
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }
    /*網頁Title更改*/
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
    }
    /*WebView顯示焦點*/
    @Override
    public void onRequestFocus(WebView view) {
        super.onRequestFocus(view);
    }
});

5.實現網頁內部逐級返回的方法

@Override
public void onBackPressed() {
    if (webView.canGoBack()){
        if (webView.getUrl().equals(url)){
            super.onBackPressed();
        }else{
            webView.goBack();
        }
    }else {
        super.onBackPressed();
    }
}

6.Android與html5交互

6.1 添加網絡權限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

6.2布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.hxl.webview.WebActivity">
    <WebView
        android:id="@id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</RelativeLayout>

6.3設置WebView支持javascript屬性

webView.getSettings().setJavaScriptEnabled(true);

6.4加載html

若在assets中，以

private String url = "file:///android_asset/travel_app_h5/travelApp.html";

webView.loadUrl(url);

加載網絡，以

private String url = "http://112.12.36.86:8008/travel_app/html/travel_app_h5/travelApp.html";

webView.loadUrl(url);

6.5android與html5交互

webView.addJavascriptInterface(this,"android");

需要在此調用的方法中加@JavascriptInterface增加安全性。

7. 實例 android調用html中的方法實現圖片的移動和放大縮小

7.1 html代碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    
    <style type="text/css" rel="stylesheet">
        body{
            padding: 0;
            margin: 0;
        }
        .app_range{
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #scenic_map{
            margin-top: 0;
            margin-left: 0;
            height:100%;

        }
    </style>
    <script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        function scale_map_blowUp() {
            var scenic_map_height = $("#scenic_map").height();
            var blowUp_height = scenic_map_height*0.05+scenic_map_height;
            $("#scenic_map").css("height",blowUp_height+"px");
        }
        function scale_map_reduce() {
            var scenic_map_height = $("#scenic_map").height();
            var reduce_height = scenic_map_height-scenic_map_height*0.05;
            $("#scenic_map").css("height",reduce_height+"px");
        }
        function move_top() {
            var scenic_map_magin_top = parseInt($("#scenic_map").css("marginTop"));
            var move_top_margin = scenic_map_magin_top-10;
            $("#scenic_map").css("marginTop",move_top_margin+"px");
        }
        function move_bottom() {
            var scenic_map_magin_top = parseInt($("#scenic_map").css("marginTop"));
            var move_top_margin = scenic_map_magin_top+10;
            $("#scenic_map").css("marginTop",move_top_margin+"px");
        }
        function move_left() {
            var scenic_map_magin_left = parseInt($("#scenic_map").css("marginLeft"));
            var move_left_margin = scenic_map_magin_left-10;
            $("#scenic_map").css("marginLeft",move_left_margin+"px");
        }
        function move_right() {
            var scenic_map_magin_left = parseInt($("#scenic_map").css("marginLeft"));
            var move_left_margin = scenic_map_magin_left+10;
            $("#scenic_map").css("marginLeft",move_left_margin+"px");
        }
    </script>
</head>
<body>
    <div id="app_range" class="app_range">
        <img id="scenic_map" src="./images/ljds_map.jpg">
    </div>
</body>
</html>

7.2 android代碼

public class WebActivity extends AppCompatActivity implements View.OnTouchListener, ScaleGestureDetector.OnScaleGestureListener {
    //private String url = "http://112.12.36.86:8008/travel_app/html/travel_app_h5/travelApp.html";
    private String url = "file:///android_asset/travel_app_h5/travelApp.html";
    private WebView webView;
    private float lastX;
    private float lastY;
    /*是否移動了*/
    private boolean isMoved;
    /*移動的閾值*/
    private static final int TOUCH_SLOP = 50;
    private boolean isCanDrag;
    private int touchMove ;
    private ScaleGestureDetector scaleGestureDetector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        initView();
        initData();
        setListener();
    }
    private void setListener() {
        webView.setOnTouchListener(this);
    }
    @JavascriptInterface
    private void initData() {
        touchMove = ViewConfiguration.get(this).getScaledTouchSlop();
        webView.loadUrl(url);
        webView.setWebViewClient(new WebViewClient(){
            /*控制新的連接在當前WebView中打開*/
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, request);
            }
        });
        /*啟用Javascript*/
        webView.getSettings().setJavaScriptEnabled(true);
        /*設置支持聚焦*/
        webView.getSettings().setSupportZoom(true);
        /* 設置為使用webView推薦的窗口 */
        webView.getSettings().setUseWideViewPort(true);
        /* 設置網頁自適應屏幕大小 */
        webView.getSettings().setLoadWithOverviewMode(false);

        webView.addJavascriptInterface(this,"android");

        scaleGestureDetector = new ScaleGestureDetector(this,this);
    }
    private void initView() {
        webView = (WebView) findViewById(R.id.webview);
    }
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        float x = motionEvent.getX();
        float y = motionEvent.getY();
        scaleGestureDetector.onTouchEvent(motionEvent);
        switch (motionEvent.getAction()){
            case MotionEvent.ACTION_DOWN:
                isMoved = false;
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                if(isMoved) break;
                float dx = x - lastX;
                float dy = y - lastY;
                if(Math.abs(dx) > TOUCH_SLOP
                        || Math.abs(dy) > TOUCH_SLOP) {
                    //移動超過閾值，則表示移動了
                    isMoved = true;
                }
                if (!isCanDrag){
                    //判斷是否移動
                    isCanDrag = isMove(dx,dy);
                }
                if (isCanDrag){
                    if (dy<0 &&Math.abs(dy)>Math.abs(dx)){
                        webView.loadUrl(String.format("javascript:move_top()"));
                    }else if (dy>0 &&Math.abs(dy)>Math.abs(dx)){
                        webView.loadUrl(String.format("javascript:move_bottom()"));
                    }else if(dx<0 &&Math.abs(dy)<Math.abs(dx)){
                        webView.loadUrl(String.format("javascript:move_left()"));
                    }else if (dx>0 &&Math.abs(dy)<Math.abs(dx)){
                        webView.loadUrl(String.format("javascript:move_right()"));
                    }
                }
                lastX = x;
                lastY = y;
            break;
            case MotionEvent.ACTION_UP:
            break;
        }
        return true;
    }
    private boolean isMove(float dx, float dy) {
        return Math.sqrt((dx*dx + dy*dy))>touchMove;
    }
    /**
     * 返回按鈕按下
     */
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()){
            if (webView.getUrl().equals(url)){
                super.onBackPressed();
            }else{
                webView.goBack();
            }
        }else {
            super.onBackPressed();
        }
    }
    /**
     * 縮放監聽事件
     */
    @Override
    public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
        //獲得縮放系數值
        // getScaleFactor()它的含義是 根據你的手勢縮放程度預期得到的圖片大小和當前圖片大小的一個比值
        // 放大時 > 1,縮小時 < 1
        float scaleFactor = scaleGestureDetector.getScaleFactor();
        if(scaleFactor<1){
            webView.loadUrl(String.format("javascript:scale_map_reduce()"));
        }else {
            webView.loadUrl(String.format("javascript:scale_map_blowUp()"));
        }
        return true;
    }
    @Override
    public boolean onScaleBegin(ScaleGestureDetector scaleGestureDetector) {
        return true;
    }
    @Override
    public void onScaleEnd(ScaleGestureDetector scaleGestureDetector) {

    }
}