安卓高級 WebView的使用到 js交互

時間 2019-11-21

原文原文鏈接

咱們先來學習怎麼使用再到用js和安卓源生方法交互javascript

WebView簡單使用

此部分轉載並作了補充原博客
緣由:比較簡單不是很想在寫,我只要寫js交互部分php

WebView能夠使得網頁輕鬆的內嵌到app裏，還能夠直接跟js相互調用。html
webview有兩個方法：setWebChromeClient 和 setWebClientjava
setWebClient：主要處理解析，渲染網頁等瀏覽器作的事情android
setWebChromeClient：輔助WebView處理Javascript的對話框，網站圖標，網站title，加載進度等 git
WebViewClient就是幫助WebView處理各類通知、請求事件的。github

在AndroidManifest.xml設置訪問網絡權限：web

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

控件：json

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

用途一：加載本地/Web資源

example.html 存放在assets文件夾內瀏覽器

調用WebView的loadUrl()方法，

加載本地資源

webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/example.html");

加載web資源：

webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("http://baidu.com");

用途二：在程序內打開網頁

建立一個本身的WebViewClient，經過setWebViewClient關聯

package com.example.testopen;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);             
        init();

    }


    private void init(){
        webView = (WebView) findViewById(R.id.webView);
        //WebView加載web資源
       webView.loadUrl("http://baidu.com");
        //覆蓋WebView默認使用第三方或系統默認瀏覽器打開網頁的行爲，使網頁用WebView打開
       webView.setWebViewClient(new WebViewClient(){
           @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // TODO Auto-generated method stub
               //返回值是true的時候控制去WebView打開，爲false調用系統瀏覽器或第三方瀏覽器
             view.loadUrl(url);
            return true;
        }
       });
    }

}

用途三：

若是訪問的頁面中有Javascript，則webview必須設置支持Javascript

//啓用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

用途四：

若是但願瀏覽的網頁後退而不是退出瀏覽器，須要WebView覆蓋URL加載，讓它自動生成歷史訪問記錄，那樣就能夠經過前進或後退訪問已訪問過的站點。

//改寫物理按鍵——返回的邏輯
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // TODO Auto-generated method stub
        if(keyCode==KeyEvent.KEYCODE_BACK)
        {
            if(webView.canGoBack())
            {
                webView.goBack();//返回上一頁面
                return true;
            }
            else
            {
                System.exit(0);//退出程序
            }
        }
        return super.onKeyDown(keyCode, event);
    }

用途五：判斷頁面加載過程

webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                // TODO Auto-generated method stub
                if (newProgress == 100) {
                    // 網頁加載完成

                } else {
                    // 加載中

                }

            }
        });

用途六：緩存的使用

優先使用緩存

webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

本人補充

還有一些用法因爲原做者沒寫因此我在這裏補充下從這裏開始就是原創部分:

需求:假設後臺給你返回的是html標籤(沒有頭尾標籤簡單說就是沒有<html><heand></head><body></body></html>)

//假設返回的字符傳以下所示:

package a.com.jswebproject.bean;

/** */
public class JString {
    public static final String  CONTENT = "<p style=\"text-indent:32px;line-height:200%;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\"><img src=\"http://s1.sns.maimaicha.com/images/2015/12/31/20151231082937_53817.jpg\" style=\"float:none;\" title=\"771c3d95184d9cb2f73a7d156d332df8.jpg\" border=\"0\" hspace=\"0\" vspace=\"0\" />光陰荏苒，</span><a href=\"http://www.sanwen.net/suibi/suiyue/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">歲月</span></a><span style=\"font-size:15px;\">飛逝如電。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">回眸花落時，</span><span style=\"font-size:15px;font-family:';\">201</span><span style=\"font-size:15px;font-family:';\">5</span><span style=\"font-size:15px;\">就這樣悄然而過</span><span style=\"font-size:15px;font-family:';\">……</span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">清淺時光，積聚如山的往事隨風遊走，</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">帶着咱們心裏全部的牽念，塵封於深深的</span><a href=\"http://huiyi.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">記憶</span></a><span style=\"font-size:15px;\">裏。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">記憶，今後被定格！</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">心生溫暖，四季平安！每逢歲杪，將昔年一一盤點</span><span style=\"font-size:15px;font-family:';\">……</span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">那一路，咱們</span><a href=\"http://cengjing.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">曾經</span></a><span style=\"font-size:15px;\">怎樣走過？</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">那一程，誰又曾從心坎上路過？</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">誠然，認識了一些人，卻也經歷過許多的事。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">浮生若</span><span style=\"font-size:15px;font-family:';\"><a href=\"http://meng.sanwen8.cn/\" target=\"_blank\"><span style=\"font-family:宋體;color:#444444;\">夢</span></a></span><span style=\"font-size:15px;\">，塵緣展轉。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">在內心，就讓那些愁殤，隨風飄逝吧！</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">站在</span><span style=\"font-size:15px;font-family:';\">201</span><span style=\"font-size:15px;font-family:';\">5</span><span style=\"font-size:15px;\">與</span><span style=\"font-size:15px;font-family:';\">201</span><span style=\"font-size:15px;font-family:';\">6</span><span style=\"font-size:15px;\">年的界碑上，不由忍不住再次回首</span><span style=\"font-size:15px;font-family:';\">——</span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">到底，有多少得失可以沉澱於心？</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">究竟，有多少</span><a href=\"http://huiyi.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">回憶</span></a><span style=\"font-size:15px;\">值得</span><a href=\"http://yongheng.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">永久</span></a><span style=\"font-size:15px;\">珍藏？</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<a href=\"http://shengming.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">生命</span></a><span style=\"font-size:15px;\">中，總有一些人會成爲彼此的匆匆過客；</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">歲月裏，總有一些事會流逝而淡出咱們的心際；</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">經年間，總有一些</span><a href=\"http://www.sanwen.net/sanwen/xinqing/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">情感</span></a><span style=\"font-size:15px;\">在磨礪中教會咱們成熟。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">經歷</span><a href=\"http://rensheng.sanwen.net/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">人生</span></a><span style=\"font-size:15px;\">中的點點滴滴，閱歷所以而豐碩起來。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">學會淡定從容，坦然</span><a href=\"http://www.sanwen.net/suibi/shenghuo/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">生活</span></a><span style=\"font-size:15px;\">；</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">學會心存善念，靜泊塵心。</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">活在當下，最美！在當下，</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">給與</span><a href=\"http://xiangxinziji.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">本身</span></a><span style=\"font-size:15px;\">一份簡單的期許，又或是</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">一個</span><a href=\"http://danchun.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">純真</span></a><span style=\"font-size:15px;\">的祈願！</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">讓明天安然，讓將來更好！</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">跨年之</span><a href=\"http://ye.sanwen8.cn/\" target=\"_blank\"><span style=\"font-size:15px;color:#444444;\">夜</span></a><span style=\"font-size:15px;\">，我倚窗凝望，北極星光，絢爛如花！</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<p style=\"text-indent:32px;line-height:200%;text-align:left;margin-bottom:24px;\">\n" +
            "\t<span style=\"font-size:15px;\">祈願，</span><span style=\"font-size:15px;font-family:';\">201</span><span style=\"font-size:15px;font-family:';\">6</span><span style=\"font-size:15px;\">年每個陽光燦爛的日子，</span><span style=\"font-size:15px;font-family:';\"></span> \n" +
            "</p>\n" +
            "<span style=\"font-size:15px;\">佑你，佑我，佑他！</span> \n" +
            "<p>\n" +
            "\t<br />\n" +
            "</p>";

}

那咱們看看具體代碼怎麼加載上面的文字吧

package a.com.jswebproject;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

import qianfeng.com.jswebproject.bean.JString;

public class JsonActivity extends AppCompatActivity {
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_json);
        initView();
        setData();
    }

    private void setData() {
        //若是你直接new WebChromeClient() 或者 new WebClient()默認在程序內打開
        mWebView.setWebChromeClient(new WebChromeClient());
        //params1 baseUrl 基地址 若是你須要在加載的頁面裏面進行相應操做，那麼提交的網址會在基地址的基礎上進行添加
        //params2 你要加載的html
        //params3 你加載的html的類型 （text/html） (text/javascript)
        //params4 編碼 "UTF-8" "GBK"
        //params5 你訪問歷史路徑
        //http://baidu.com?username=lla&password=123456;
        mWebView.loadDataWithBaseURL(null, JString.CONTENT,"text/html","UTF-8",null);
    }

    private void initView() {
        mWebView = (WebView) findViewById(R.id.wv_json_test);
    }
}

再來看個有加載動畫的案例並具備刷新後退前進功能的

package qianfeng.com.jswebproject;

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.ProgressBar;

import qianfeng.com.jswebproject.client.MyChormeClient;
import qianfeng.com.jswebproject.client.MyWebViewClient;

public class NetActivity extends AppCompatActivity {
    private WebView mWebView;
    private ActionBar mActionBar;
    private ProgressBar mProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_net);
        initView();
        initData();
        setData();
        setListener();
    }

    private void initView() {
      mWebView = (WebView) findViewById(R.id.wv_net_test);
      mActionBar =  getSupportActionBar();
      mProgressBar = (ProgressBar) findViewById(R.id.pb_net_show);
    }

   public void onClick(View view){
       if (view!=null){
           switch (view.getId()){
               case R.id.bt_net_advance:
                   if (mWebView.canGoForward()){
                       mWebView.goForward();
                   }
                   break;
               case R.id.bt_net_back:
                   if (mWebView.canGoBack()){
                       mWebView.goBack();
                   }
                   break;
               case R.id.bt_net_refresh:
                   // WebView重新加載（刷新）
                   mWebView.reload();
                   break;
               case R.id.bt_net_stop:
                   // WebView中止加載
                   mWebView.stopLoading();
                   break;
               default:
                   break;
           }
       }
   }

    private void setListener() {
    }

    private void setData() {
        // 加載網址，要肯定你的網址是正確的，而後網絡正常，最後權限（聯網權限）
        mWebView.loadUrl("http://baidu.com");
        // WebView在加載網頁時候須要設置一個WebViewClient 用來監聽網絡加載開始和介紹的
        // 若是你不設置爲客戶端，他就會調用系統默認的瀏覽器來給你加載網頁
        //mWebView.setWebViewClient(new WebViewClient());
        MyWebViewClient webViewClient = new MyWebViewClient();
        webViewClient.setClientListener(new MyWebViewClient.ClientCallBack() {
            @Override
            public void onStart(String url) {
                // 設置控件顯示和隱藏或者消失
                mProgressBar.setVisibility(View.VISIBLE);
            }

            @Override
            public void onFinish(String url) {
             mProgressBar.setVisibility(View.GONE);
            }
        });
        mWebView.setWebViewClient(webViewClient);
        // 給WebView設置一個ChormeClient，來檢測網頁加載進度和收到的標題
       // mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebChromeClient(new MyChormeClient());
        MyChormeClient client = new MyChormeClient();
        client.setChormeListener(new MyChormeClient.ChormeCallBack() {
            @Override
            public void onProgressChanged(int progress) {
                // 給ProgressBar設置進度
                mProgressBar.setProgress(progress);

            }

            @Override
            public void onReceivedTitle(String title) {
              if (!TextUtils.isEmpty(title)){
                  mActionBar.setTitle(title);
              }
            }
        });
        mWebView.setWebChromeClient(client);
        // 獲取WebView的基本設置
        WebSettings settings = mWebView.getSettings();
        // 設置和js交互是否可用
        settings.setJavaScriptEnabled(true);
        mWebView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

    }

    private void initData() {
    }
    // 當用戶按下返回鍵的時候，系統就會調用這個方法
    @Override
    public void onBackPressed() {
        // 判斷WebView是否可以返回
        if (mWebView.canGoBack()){
            // 若是能返回，就返回WebView的內容
            mWebView.goBack();
        }else {
            super.onBackPressed();
        }

    }
}

JS方法調用安卓方法

咱們建立一個類用於給js交互
若是你的方法想給js調用,此方法必須加上註解@JavascriptInterface

class JS {

        //若是此方法想 被js調用必須寫此註解
        @JavascriptInterface
        public void showToast(String msg){
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void sub(int a,int b){
            Toast.makeText(MainActivity.this, (a+b)+"", Toast.LENGTH_SHORT).show();
        }
    }

添加此類到webView中

//第二個參數隨意 當HTML5工程師想調用js方法時
// 第二個參數名字.方法名 
//如:Android.sub(20,30)
   JS js = new JS();
   webView.addJavascriptInterface(js,"Android");

js 使用時調用
先來看看html 源碼吧

<html>
<meta charset="UTF-8">
<head>
    <title>這是個人第一個html</title>
    <script type="text/javascript"> function add (a ,b){ var count = a+b; var textHtml = document.getElementById("result_text"); textHtml.innerHTML = count; } function showToast(msg){ Android.showToast(msg); } function sub(a,b){ Android.sub(a,b); } function test(msg){ var textHtml = document.getElementById("result_text"); textHtml.innerHTML = msg; } </script>
</head>
<body>
<h1>這是啥啊</h1>
<h2>這是啥啊</h2>
<h3>這是啥啊</h3>
<h4>這是啥</h4>

<p>CSDN的朋友們一塊兒學習</p>
<input value="這是一個button" type="button" onclick="javascript:alert('你們好')"><br/>
<input value="點擊我試試" type="button" onclick="add(20,10)"><br/>
<input value="點擊調用Android顯示一個Toast" type="button" onclick="showToast('這是來着網頁的文本')"><br/>
<input value="點擊調用Android 進行一個減法" type="button" onclick="sub(90,10)">

<a href="https://baidu.com">點擊去百度</a>

<form>
    <label><input type="text" name="username"></label>
    <label><input type="text" name="password"></label>
    <input type="submit" name="點擊提交">

</form>

<div id="result_text"></div>

</body>

</html>

核心部分:

<script type="text/javascript"> function showToast(msg){ Android.showToast(msg); } function sub(a,b){ Android.sub(a,b); } </script>

//感謝同窗們

安卓調用JS

webView.loadUrl("javascript:test('你好啊朋友')");

test爲js中的方法

function test(msg){
         var textHtml = document.getElementById("result_text");
         textHtml.innerHTML = msg;
        }

好了你們看下完整一點的代碼吧

package com.example.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private WebSettings settings;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebChromeClient(new WebChromeClient());
        settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/haha.html");
        JS js = new JS();
        webView.addJavascriptInterface(js,"Android");

    }


    class JS {

        //若是此方法想 被js調用必須寫此註解
        @JavascriptInterface
        public void showToast(String msg){
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void sub(int a,int b){
            Toast.makeText(MainActivity.this, (a+b)+"", Toast.LENGTH_SHORT).show();
        }
    }

    public void onClick(View view) {
        webView.loadUrl("javascript:test('你好啊朋友')");
    }
}