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

2023-08-16 21:31:16

我们先来学习怎么使用再到用js和安卓源生方法交互

WebView简单使用

此部分转载并做了补充原博客

原因:比较简单不是很想在写,我只要写js交互部分

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。
webview有两个方法：setWebChromeClient 和 setWebClient
setWebClient：主要处理解析，渲染网页等浏览器做的事情
setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等
WebViewClient就是帮助WebView处理各种通知、请求事件的。

在AndroidManifest.xml设置访问网络权限：

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

控件：

<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('你好啊朋友')");

    }

}

源码:github源码

码农公寓

WebView简单使用

本人补充

JS方法调用安卓方法

安卓调用JS

相关文章