Android：WebView用法（Js交互）

深碍√TFBOYSˉ_ 2022-07-26 00:11 277阅读 0赞

首先推荐几篇关于WebView详解总结，文章都很长，没有充分时间和耐心慎点：  
[《webView的使用以及总结》][webView]  
[《Android WebView使用深入浅出》][Android WebView]  
[《简明webView使用》][webView 1]

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。  
webview有两个方法：setWebChromeClient 和 setWebClient

1.  setWebClient：主要处理解析，渲染网页等浏览器做的事情
2.  setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等
3.  WebViewClient就是帮助WebView处理各种通知、请求事件的。

WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页，实现WebView有以下两种不同的方法：

### 第一种方法的步骤： ###

1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);  
2.调用WebView的loadUrl()方法，设置WevView要显示的网页：  
互联网用：webView.loadUrl(“[http://www.google.com][http_www.google.com]“);  
本地文件用：webView.loadUrl(“file:///android\_asset/XX.html”); 本地文件存放在：assets 文件中  
3.调用Activity的setContentView( )方法来显示网页视图  
4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面  
5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。

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

上代码：

![这里写图片描述][20160404161920779]

### 第二种方法的步骤： ###

1、在布局文件中声明WebView  
2、在Activity中实例化WebView  
3、调用WebView的loadUrl( )方法，设置WevView要显示的网页  
4、为了让WebView能够响应超链接功能，调用setWebViewClient( )方法，设置 WebView视图  
5、用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面  
6、需要在AndroidManifest.xml文件中添加权限，否则出现Web page not available错误。

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

package com.myapplication.findviewiddemo;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.KeyEvent;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    
    public class MainActivity extends AppCompatActivity { 
        private WebView webView;
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initViews();
        }
    
        private void initViews() {
            //初始化WebView
            webView = f(R.id.webView);
            //设置webView属性，能够执行Javascript脚本
            webView.getSettings().setJavaScriptEnabled(true);
            //加载需要显示的网页
            webView.loadUrl("http://www.51cto.com/");
            //设置webView视图
            webView.setWebViewClient(new MyWebViewClient());
        }
    
        private <T> T f(int id) {
            return (T) findViewById(id);
        }
    
        @Override
        //设置回退
        //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
                webView.goBack(); //goBack()表示返回webView的上一页面
                return true;
            }
            return false;
        }
    
        //Web视图
        private class MyWebViewClient extends WebViewClient { 
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //return super.shouldOverrideUrlLoading(view, url);
                view.loadUrl(url);
                return true;
            }
        }
    }

### 注意事项： ###

1.AndroidManifest.xml中必须使用许可”android.permission.INTERNET”,否则会出Webpage not available错误。  
2.如果访问的页面中有Javascript，则webview必须设置支持Javascript。

webview.getSettings().setJavaScriptEnabled(true);

3.如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象。

webView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    //return super.shouldOverrideUrlLoading(view, url);
                    view.loadUrl(url);
                    return true;
                }
            });

4.如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

//设置回退
        //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
                webView.goBack(); //goBack()表示返回webView的上一页面
                return true;
            }
            return false;
        }

5.如果webView中需要用户手动输入用户名、密码或其他，则webview必须设置支持获取手势焦点。

webview.requestFocusFromTouch();

6.WebView 加载界面主要调用三个方法：LoadUrl、LoadData、LoadDataWithBaseURL.  
\- 1、LoadUrl 直接加载网页、图片并显示.（本地或是网络上的网页、图片、gif）  
\- 2、LoadData 显示文字与图片内容（模拟器1.5、1.6）  
\- 3、LoadDataWithBase 显示文字与图片内容（支持多个模拟器版本）

### WebSetting常用的方法详解： ###

WebSettings webSetting = webView.getSettings();
            //支持js
            webSetting.setJavaScriptEnabled(true);
            //将图片调整到适合webView的大小
            webSetting.setUseWideViewPort(false);
            //支持缩放
            webSetting.setSupportZoom(true);
            //支持内容重新布局
            webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
            //多窗口
            webSetting.supportMultipleWindows();
            //关闭webView中缓存
            webSetting.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
            //设置可以访问文件
            webSetting.setAllowFileAccess(true);
            //当webView调用requestFocus时为webView设置节点
            webSetting.setNeedInitialFocus(true);
            webSetting.setBuiltInZoomControls(true);//设置支持缩放
            //支持通过JS打开新窗口
            webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
            //设置自动加载图片
            webSetting.setLoadsImagesAutomatically(true);

### WebViewClient的方法全解 ###

*  doUpdateVisitedHistory(WebViewview,Stringurl, boolean isReload)  
    (更新历史记录)
 *  onFormResubmission(WebViewview,MessagedontResend,Messageresend)  
    (应用程序重新请求网页数据)
 *  onLoadResource(WebViewview,Stringurl)  
    在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
 *  onPageStarted(WebViewview,Stringurl,Bitmapfavicon)  
    这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。
 *  onPageFinished(WebViewview,Stringurl)  
    在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。
 *  onReceivedError(WebViewview, int  
    errorCode,Stringdescription,StringfailingUrl) (报告错误信息)
 *  onReceivedHttpAuthRequest(WebViewview,HttpAuthHandlerhandler,Stringhost,Stringrealm)  
    （获取返回信息授权请求）
 *  onReceivedSslError(WebViewview,SslErrorHandlerhandler,SslErrorerror)  
    重写此方法可以让webview处理https请求。
 *  onScaleChanged(WebViewview, float oldScale, float newScale)  
    (WebView发生改变时调用)
 *  onUnhandledKeyEvent(WebViewview,KeyEventevent) （Key事件未被加载时调用）
 *  shouldOverrideKeyEvent(WebViewview,KeyEventevent)  
    重写此方法才能够处理在浏览器中的按键事件。
 *  shouldOverrideUrlLoading(WebViewview,Stringurl)  
    在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。

### WebView与JavaScript的交互 ###

1.  webview调用js

mWebView.loadUrl("javascript:do()");

以上是webview在调用js中的一个叫做do的方法，该js所在的html文件大致如下：

<html>
      <script language="javascript"> /* This function is invoked by the webview*/ function do() { alert("1"); } </script>
      <body>
        <a><div style="width:80px; margin:0px auto; padding:10px; text-align:center; border:2px solid #111111;" >
            <img id="droid" src="xx.png"/><br>
            Click me!
        </div></a>
      </body>
    </html>

2.js调用webview

我们假设下列的本地类是要给js调用的：

package com.test.webview;
    class DemoJavaScriptInterface {
      DemoJavaScriptInterface() {
      }
      /** * This is not called on the UI thread. Post a runnable to invoke * loadUrl on the UI thread. */
      public void clickOnAndroid() {
          mHandler.post(new Runnable() {
        public void run() {
            //TODO
        }
          });
      }
        }

首先给webview设置：

mWebview.setJavaScriptEnabled(true);

随后将本地的类（被js调用的）映射出去：

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

“demo”这个名字就是公布出去给JS调用的，那么js久可以直接用下列代码调用本地的DemoJavaScriptInterface类中的方法了：

[webView]: http://www.360doc.com/content/14/0611/13/15210553_385676271.shtml
[Android WebView]: http://www.open-open.com/lib/view/open1431569835951.html
[webView 1]: http://www.cnblogs.com/tinyphp/p/3858997.html
[http_www.google.com]: http://www.google.com
[20160404161920779]: /images/20220724/9a18950eb83543f6a884f10684d847cf.png