Android中WebView的使用

最新推荐文章于 2025-08-15 15:43:57 发布

原创最新推荐文章于 2025-08-15 15:43:57 发布 · 909 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #webview

WebView 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了WebView的应用场景、基本配置方法及如何处理页面加载错误等问题，并深入探讨了WebView与JavaScript的交互方式，包括调用JS方法及从JS调用本地代码。

WebView的优点

可以直接显示和渲染web页面，直接显示网页
webview可以直接用html文件（网络上或本地assets中）作布局
和JavaScript交互调用

WebView的基本使用

<WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="10dp" />

同时，因为要房访问网络，所以manifest中必须要加uses-permission：

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

在activity中即可获得webview的引用，同时load一个网址：

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

通过这种方式去加载一个WebView你会发现,他是跳转到系统的浏览器中,那么我们该如何解决呢?

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

若自己定义了一个页面加载进度的progressbar，需要展示给用户的时候，可以通过如下方式获取webview内页面的加载进度：

webview.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //可以在这里设置progressBar进度

            }
        });

每个页面，都有一个标题，比如www.baidu.com这个页面的title即“百度一下，你就知道”，那么如何知道当前webview正在加载的页面的title呢：

webview.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, String title) {
                titleview.setText(title);//a textview
            }
        });

那么如果我们的WebView加载时出现错误需要怎么处理呢?

webview.setWebViewClient(new WebViewClient(){

   @Override
    public void onReceivedError(WebView view, int errorCode,
        String description, String failingUrl) {
    switch(errorCode)
    {
        case HttpStatus.SC_NOT_FOUND:
        //去加载我们的本地html文件
        view.loadUrl("file:///android_assets/error_handle.html");
        break;
    }
      }
  });

WebView与Js的交互

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与JavaScript相互调用混淆问题

若webview中的js调用了本地的方法，正常情况下发布的debug包js调用的时候是没有问题的，但是通常发布商业版本的apk都是要经过混淆的步骤，这个时候会发现之前调用正常的js却无法正常调用本地方法了。

这是因为混淆的时候已经把本地的代码的引用给打乱了，导致js中的代码找不到本地的方法的地址。

解决这个问题很简单，即在proguard.cfg文件中加上一些代码，声明本地中被js调用的代码不被混淆。下面举例说明：

第五节中被js调用的那个类DemoJavaScriptInterface的包名为com.test.webview，那么就要在proguard.cfg文件中加入：

-keep public class com.test.webview.DemoJavaScriptInterface{
    public <methods>;
}

若是内部类，则大致写成如下形式：

-keep public class com.test.webview.DemoJavaScriptInterface$InnerClass{
    public <methods>;
}

若android版本比较新，可能还需要添加上下列代码：

-keepattributes *Annotation*  
-keepattributes *JavascriptInterface*