一篇文章搞定《玩转WebView》

一篇文章搞定《玩转WebView》

  • 前言
  • WebView的常见方法
    • WebView的状态相关方法
    • WebView的前进和后退
    • WebView的缓存
  • WebView常用的子类
    • WebSettings类
    • WebViewClient类
    • WebChromeClient类
  • WebView和JavaScript的交互
    • JS调用Android
      • 通过 WebView 的addJavascriptInterface()进行对象映射
      • 通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url
      • 通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息
    • Android调用JS
      • 通过WebView的loadUrl()
      • 通过WebView.evaluateJavascript()-Android4.4之后
      • 正常使用需要混合使用
    • JS带回调的调用
      • 实现原理
      • 整个例子
  • 开发中出现的问题
    • shouldInterceptRequest 和 shouldOverrideUrlLoading
    • WebView内存泄漏的问题
    • Alert无法弹出
    • Uncaught ReferenceError: functionName is not defined
    • Uncaught TypeError: Object [object Object] has no method
  • 总结

前言

首先本篇文章是铺垫,为了下一篇的WebView的优化。所以本文还是比较轻松的,都是说的如何去使用,保姆级入门教程哦。

Android WebView在Android平台上是一个特殊的View,它能用来显示网页。

接下来我们也简要了解一下下面这三个部分的内容:

  • WebView的常见方法
  • WebView常用的子类 (WebSettings类、WebViewClient类、WebChromeClient类)
  • WebView和JavaScript的交互
  • 开发中常见的问题

WebView的常见方法

WebView的状态相关方法

//激活WebView为活跃状态,能正常执行网页的响应

webView.onResume()//当页面被失去焦点被切换到后台不可见状态,需要执行onPause()
//通过onPause()动作通知内核暂停所有的动作,比如DOM的解析、JavaScript执行等

webView.onPause()//当应用程序(存在webview)被切换到后台时,这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
 //它会暂停所有webview的布局显示、解析、延时,从而降低CPU功耗
webView.pauseTimers()

//恢复pauseTimers状态

webView.resumeTimers()//销毁Webview //在关闭了Activity时,如果Webview的音乐或视频,还在播放,就必须销毁Webview。
//但是注意:webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview
rootLayout.removeView(webView);
webView.destroy();

WebView的前进和后退

//是否可以后退
Webview.canGoBack()

//后退网页
Webview.goBack()

//是否可以前进
Webview.canGoForward()

//前进网页
Webview.goForward()

//以当前的index为起始点前进或者后退到历史记录中指定的steps
//如果steps为负数则为后退,正数则为前进
Webview.goBackOrForward(intsteps)

比如:当不做任何处理时,浏览网页时,点击系统的“Back”键。就会退出当前的Activity。那么,在这里,我们可以做一些处理,让点击“Back”键后,让网页返回上一页而不是直接退出浏览器。

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) {
         mWebView.goBack();
         return true;
    }
    return super.onKeyDown(keyCode, event);
}

WebView的缓存

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()//这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
Webview.clearFormData()

WebView常用的子类

WebSettings类

作用:对WebView进行配置和管理,可以设置与Javascript交互、适应屏幕、设置缓存模式等等设置项

//声明WebSettings子类
WebSettings webSettings = webView.getSettings();

一些常用的对WebView的设置

//如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);

//支持插件
webSettings.setPluginsEnabled(true);

 //设置自适应屏幕,两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

//缩放操作
webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

//webview中缓存设置
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
    //LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
    //LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。
    //LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
    //LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据

//设置可以访问文件
webSettings.setAllowFileAccess(true); 
//支持通过JS打开新窗口
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); 
//支持自动加载图片
webSettings.setLoadsImagesAutomatically(true); 
//设置编码格式
webSettings.setDefaultTextEncodingName("utf-8");

WebViewClient类

作用:主要处理webView加载过程中的各种事件,并在其中进行拦截和处理,例如加载开始、加载完成、加载错误、页面跳转等。
设计模式:采用了适配器模式

webView.setWebViewClient(new WebViewClient(){

	//shouldOverrideUrlLoading 则用于拦截 WebView 中的页面跳转请求并做相应处理
	//场景:可以用来拦截特定的 URL 请求,进行重定向或者其他业务逻辑处理,比如处理第三方登录、处理深链接跳转等
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 重写shouldOverrideUrlLoading()方法,使得打开网页时不调用系统浏览器, 而是在本WebView中显示
        view.loadUrl(request.getUrl().toString());
        return true;
    }
    
    //shouldInterceptRequest 用于拦截 WebView 发起的网络请求并处理响应结果
    //场景:可以用来实现缓存机制、修改请求头、屏蔽广告等功能。
	@Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
         //拦截URL,进行解析
         Uri uri = request.getUrl();
         Set<String> collection = uri.getQueryParameterNames();
         new Handler(Looper.getMainLooper()).post(() ->{
              Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();
         });
         return super.shouldInterceptRequest(view, request);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 页面加载的开始,我们可以去启动进度条等加载动画
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // 页面加载结束,可以去关闭进度条等加载动画
    }

    @Override
    public void onLoadResource(WebView view, String url) {
        // 每次加载资源都会去调用
        // 可以对一些加载资源进行拦截
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        // 加载页面的服务器出现错误时(如404)调用。
        // 通常出现错误的时候,不会给用户直接展示404。而是替换本地的错误展示页面
        // 比如本地的一个HTML(自己写一个HTML放在代码根目录的assets文件夹下)
        switch(errorCode) {
            case 404:
                view.loadUrl("file:///android_assets/error.html");
                break;
        }
    }

    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        // 处理https请求
        // webView默认是不处理https请求的,页面显示空白
        handler.proceed(); //表示等待证书响应
        handler.cancel(); //表示挂起连接,为默认方式
        handler.handleMessage(null); //可做其他处理
    }
});

其中需要注意的点为:shouldInterceptRequest 用于拦截 WebView 发起的网络请求并处理响应结果,而 shouldOverrideUrlLoading 则用于拦截 WebView 中的页面跳转请求并做相应处理。两者一般配合使用,通过对网络请求和页面跳转的拦截处理,可以实现更灵活的 WebView 应用,如定制化缓存、拦截广告、处理特定的 URL 等。

WebChromeClient类

作用:主要处理webView中关于页面的各种事件,例如页面标题改变、进度改变、弹窗提示、获取网页信息等
设计模式:采用了适配器模式

webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        //获得网页的加载进度并显示
        processView.set(newProgress);
    }

    //拦截JS中的三种弹窗
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        // 当网页调用alert()来弹出alert弹出框前回调,用以拦截alert()函数
        return true;
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        // 当网页调用confirm()来弹出confirm弹出框前回调,用以拦截confirm()函数
        return true;
    }

    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 当网页调用prompt()来弹出prompt弹出框前回调,用以拦截prompt()函数
        return true;
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
        // 获取标题的
        titleView.setText(title);
    }
});

WebView和JavaScript的交互

WebView和JS的交互,是在开发中经常遇到的需求,下面简单介绍几种交互的方式。

JS调用Android

对于JS调用Android代码的方法有3种:

  1. 通过 WebView 的addJavascriptInterface()进行对象映射
  2. 通过 WebViewClient 的shouldOverrideUrlLoading()方法回调拦截 url
  3. 通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

通过 WebView 的addJavascriptInterface()进行对象映射

第一步:准备一个HTML,当然可以是下发的HTML,放在app/src/main/assets/下为js.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebView</title>
    <style>
        body {
            background-color: #f2f2f2;
        }
    </style>
<!--由于对象映射,所以调用jsMethod对象等于调用Android映射的对象-->
    <script>
         function callAndroid(){
            jsMethod.hello("哈哈哈,笑死了");
         }
      </script>
</head>
<body>
<!--触发事件-->
<button type="button" id="button1" onclick="callAndroid()">点击按钮,笑死了</button>
</body>
</html>

第二步:定义一个与JS对象映射关系的Android类:JsMethod()

public class JsMethod{
    //定义JS需要调用的方法,被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg){
        Toast.makeText(aaa.this, msg, Toast.LENGTH_SHORT).show();
    }
}

第三步:在Android里通过WebView设置Android类与JS代码的映射

WebSettings webSettings = webView.getSettings();
//设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
//通过addJavascriptInterface和@JavascriptInterface映射hello方法
webView.addJavascriptInterface(new JsMethod(), "jsMethod");
//加载本地的HTML
webView.loadUrl("file:///android_asset/js.html");

通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url

第一步:还是一样准备一个HTML,当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SoarYuan</title>
<!--约定的url协议为:js://webview?arg1=哈哈哈&arg2=呜呜呜-->
    <script>
         function callAndroid(){
            document.location = "js://webview?arg1=哈哈哈&arg2=呜呜呜";
         }
      </script>
</head>

<!-- 点击按钮则调用callAndroid()方法  -->
<body>
<button type="button" id="button2" onclick="callAndroid()">点击按钮,调用Android</button>
</body>
</html>

第二步:在Android通过WebViewClient复写shouldOverrideUrlLoading()
当该JS通过Android的mWebView.loadUrl(“file:///android_asset/javascript.html”)加载后,就会回调shouldOverrideUrlLoading()。

webView.loadUrl("file:///android_asset/js2.html");
webView.setWebViewClient(new WebViewClient() {
    @Nullable
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request){
        //拦截URL,进行解析
        Uri uri = request.getUrl();
        Set<String> collection = uri.getQueryParameterNames();
        new Handler(Looper.getMainLooper()).post(() ->{
            Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();
        });
        return super.shouldOverrideUrlLoading(view, request);
    }
});

这里一定要重点说一下:shouldInterceptRequest拦截
因为这一种常规,也常见的做法这种方式。

WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)

简单说一下这个项目中常见的方式:利用特定的schema URL:
说白了:也就是通过协定协议进行通信,实现Native端和Web端双向通信的一种机制。
举个例子:约定固定格式的scheme协议

[customscheme:][//methodName][?params={data, callback}]
customscheme:自定义需要拦截的scheme
methodName:需要调用的native的方法
params:传递给native的参数 和 回调函数名

之后我们按照这个协议去发送:

jsbridge://showToast?text=hello

这一眼就知道了,这是让你去showToast,之后内容是hello。
当然这是一种简单的例子,在项目中会根据需求和封装去定义协议格式的(也可以直接用JSbridge三方框架去交互)。

也很简单,我们只需要跟JS那边协商好,到了这边去按照商定的协议格式去解析就行了,不多比比了。
(这里就简单说一下,不细讲了,本篇主要是说简单入门,主要是为了后面的优化做铺垫)

通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

具体原理:Android通过 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调分别拦截JS对话框(即上述三个方法),得到他们的消息内容,然后解析即可。
第一步:还是一样准备一个HTML,当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SoarYuan</title>
    <script>
        function clickprompt(){
            // 调用prompt()
            var result=prompt("js://webview?arg1=哈哈哈&arg2=呜呜呜");
            alert("demo " + result);
        }
      
    </script>
</head>

<!-- 点击按钮则调用clickprompt()  -->
<body>
<button type="button" id="button3" onclick="clickprompt()">点击调用,Android方法</button>
</body>
</html>

第二步:在Android通过WebChromeClient复写onJsPrompt()
当使用mWebView.loadUrl(“file:///android_asset/javascript.html”)加载了上述JS代码后,就会触发回调onJsPrompt()

webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 注意一般是通过message去传送内容,message是代表promt())的内容。
        Uri uri = Uri.parse(message);
        Set<String> collection = uri.getQueryParameterNames();
        new Handler(Looper.getMainLooper()).post(() ->{
            Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();
        });
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
});

Android调用JS

  1. 通过WebView的loadUrl()
  2. 通过WebView的evaluateJavascript()

建议:两种结合使用,因为WebView的evaluateJavascript()是在Android4.4之后支持的,之前要适配WebView的loadUrl(),一起使用。

通过WebView的loadUrl()

第一步:准备一个HTML,当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebView</title>
    <!--Android需要调用的方法-->
    <script>
         function callJS(){
             alert("Android调用了JS的callJS方法");
         }
    </script>
</head>
</html>

第二步:在Android里通过WebView设置调用JS代码
JS代码调用一定要在 onPageFinished() 回调之后才能调用
不然会报错:Uncaught ReferenceError: functionName is not defined

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 设置与Js交互的权限
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗

webView.loadUrl("file:///android_asset/js4.html");
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 通过Handler发送消息
        webView.post(new Runnable() {
            @Override
            public void run() {
                // 调用javascript的callJS()方法
                webView.loadUrl("javascript:callJS()");
            }
        });
    }
});

// webview只是载体,内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
webView.setWebChromeClient(new WebChromeClient());

通过WebView.evaluateJavascript()-Android4.4之后

  • 比第一种方法效率更高、使用更简洁。Android 4.4 后才可使用
  • 该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。
webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
    @Override 
    public void onReceiveValue(String value) { 
        //此处为 js 返回的结果     
    }
}); 

正常使用需要混合使用

因为带适配Android 4.4之前的版本

if (Build.VERSION.SDK_INT < 18) {
    webView.loadUrl("javascript:callJS()");
} else {
    webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

JS带回调的调用

上面已经说到了APP、Web间双向通信的方法。
但站在一端而言还是一个单向通信的过程 ,比如站在Web的角度:Web调用APP的方法,APP直接相关操作但无法将结果返回给Web,但实际使用中会经常需要将操作的结果返回,也就是JS回调。

实现原理

其实这种回调就是基于之前的单向通信去实现的
我们在一端调用的时候在参数中加一个callbackId标记对应的回调,对端接收到调用请求后,进行实际操作,如果带有callbackId,对端再进行一次调用,将结果、callbackId回传回来,这端根据callbackId匹配相应的回调,将结果传入执行就可以了。
也就是说其实回调的调用,也就是两次单项通信实现的。

整个例子

Web端代码

<body>
  <div>
    <button id="showBtn">获取APP输入,以Web弹窗展现</button>
  </div>
</body>
<script>
  let id = 1;
  // 根据id保存callback
  const callbackMap = {};
  // 使用JSSDK封装调用与APP通信的事件,避免过多的污染全局环境
  window.JSSDK = {
    // 获取APP端输入框value,带有回调
    getNativeEditTextValue(callback) {
      const callbackId = id++;
      callbackMap[callbackId] = callback;
      // 调用JSB方法,并将callbackId传入
      window.NativeBridge.getNativeEditTextValue(callbackId);
    },
    // 接收APP端传来的callbackId
    receiveMessage(callbackId, value) {
      if (callbackMap[callbackId]) {
        // 根据ID匹配callback,并执行
        callbackMap[callbackId](value);
      }
    }
  };

        const showBtn = document.querySelector('#showBtn');
  // 绑定按钮事件
  showBtn.addEventListener('click', e => {
    // 通过JSSDK调用,将回调函数传入
    window.JSSDK.getNativeEditTextValue(value => window.alert('APP输入值:' + value));
  });
</script>

Android端代码

webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");

class NativeBridge {
  private Context ctx;
  NativeBridge(Context ctx) {
    this.ctx = ctx;
  }

  // 获取APP端输入值
  @JavascriptInterface
  public void getNativeEditTextValue(int callbackId) {
    MainActivity mainActivity = (MainActivity)ctx;
    // 获取APP端输入框的value
    String value = mainActivity.editText.getText().toString();
    // 需要注入在Web执行的JS代码
    String jsCode = String.format("window.JSSDK.receiveMessage(%s, '%s')", callbackId, value);
    // 在UI线程中执行
    mainActivity.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        mainActivity.webView.evaluateJavascript(jsCode, null);
      }
    });
  }
}

在Web端点击按钮,会获取APP端输入框的值,并将值以Web端弹窗展现,这样就实现了Web->APP带有回调的JSB调用,同理APP->Web也是同样的逻辑,不同的只是将callback保存在APP端罢了

开发中出现的问题

shouldInterceptRequest 和 shouldOverrideUrlLoading

shouldInterceptRequest 和 shouldOverrideUrlLoading 都是 WebView 的方法,用于拦截 WebView 中的网络请求和页面跳转。

  1. shouldInterceptRequest:

    • 作用:拦截 WebView 发起的网络请求。
    • 方法签名:WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)
    • 参数说明:
      • view:当前 WebView 对象。
      • request:代表当前请求的 WebResourceRequest 对象,包含请求的 URL、请求头、请求方法等信息。
    • 返回值:WebResourceResponse 对象,用于返回拦截后的响应数据给 WebView。可以通过 WebResourceResponse 构造函数传入自定义的数据。
    • 场景:可以用来实现缓存机制、修改请求头、屏蔽广告等功能。
  2. shouldOverrideUrlLoading:

    • 作用:拦截 WebView 中的页面跳转请求。
    • 方法签名:boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
    • 参数说明:
      • view:当前 WebView 对象。
      • request:代表当前请求的 WebResourceRequest 对象,包含请求的 URL、请求头、请求方法等信息。
    • 返回值:boolean,返回 true 表示拦截该请求,不再加载该网页;返回 false 表示继续加载该网页。
    • 场景:可以用来拦截特定的 URL 请求,进行重定向或者其他业务逻辑处理,比如处理第三方登录、处理深链接跳转等。

总结:
shouldInterceptRequest 用于拦截 WebView 发起的网络请求并处理响应结果,而 shouldOverrideUrlLoading 则用于拦截 WebView 中的页面跳转请求并做相应处理。两者一般配合使用,通过对网络请求和页面跳转的拦截处理,可以实现更灵活的 WebView 应用,如定制化缓存、拦截广告、处理特定的 URL 等。

WebView内存泄漏的问题

可以分为三点进行解决:

  • 不在XML中初始化,直接在代码中new出来,添加到布局中
    • 当在xml布局文件中定义了一个WebView时,WebView会被添加到视图层级中,并且被视为一个视图对象而被持有。在Activity或Fragment销毁时,如果没有及时释放WebView对象,就会导致WebView的内存泄露。
    • 相比之下,通过代码将WebView实例化并添加到视图层级中,可以更加灵活地控制WebView的生命周期。在Activity或Fragment销毁时,在相应的生命周期方法(如onDestroy)中调用WebView的destroy()方法来释放WebView对象,从而避免WebView的内存泄露。
  • 不要让 WebView 持有对 Activity/Fragment 的 Context 引用
    • WebView 内存泄露的主要原因是引用了 Activity/Fragment 的 Context,加之 WebView 本身的设计问题,导致 Activity/Fragment 无法被即时释放,既然 WebView 无法即时释放 Context,因此使用全局的Context去解决这个问题。
// 让 WebView 使用 ApplicationContext
WebView webview = new WebView(this.applicationContext)
  • 销毁时,停止 WebView 的加载,并从父控件中将其移除
@Override
protected void onDestroy() {
    if (webView != null) {
        webView.removeAllViews();
        ((ViewGroup) webView.getParent()).removeView(webView);
        webView.setTag(null);
        webView.clearHistory();
        webView.destroy();
        webView = null;
    }
}

补充1:其实新版的webView(在Android6.0)以上,webView泄漏的问题已经被官方解决了,但是还是建议加上这些方案,避免不必要的问题发生。
补充2:如果使用的是单独进程的话,就没这个问题了,直接杀死进程就完事了。

Alert无法弹出

没有设置WebChromeClient,按照以下代码设置:

  • webview只是载体,内容的渲染需要使用webviewChromClient类去实现
  • 通过设置WebChromeClient对象处理JavaScript的对话框
webView.setWebChromeClient(new WebChromeClient());

Uncaught ReferenceError: functionName is not defined

原因:页面没加载完,找不到JS方法
调用等待onPageFinished() 回调之后

@Override
public void onPageFinished(WebView view, String url) {
     // 页面加载结束,可以去关闭进度条等加载动画
}

Uncaught TypeError: Object [object Object] has no method

  • 没加@JavascriptInterface注释
  • 代码混淆问题:在混淆文件加入映射的JS调用类
在proguard-rules.pro中添加混淆。
-keepattributes *Annotation*
        -keepattributes *JavascriptInterface*
        -keep public class xx.xxx.JsMethod{
    public <methods>;
}
其中xx.xxx..JsMethod 是不需要混淆的类

总结

奥利给!!!!

你可能感兴趣的:(一篇文章搞定Android,Android,webview,android,html5)