美文网首页
Android Using JavaScript in WebV

Android Using JavaScript in WebV

作者: iamwent | 来源:发表于2017-02-27 10:24 被阅读100次

    在 Android 开发中,有时候需要 native 和 HTML5 页面进行交互,有两种方式:其一是给 WebView 添加 Javascript 回调接口,一种是拦截 WebView 的 url 从而达到交互的目的。

    Enabling JavaScript

    WebView 默认是禁用 JavaScript 的,所以要打开这项设置才能与之交互,方法如下:

    webView.getSettings().setJavaScriptEnabled(true);
    

    Javascript invoke Java

    假设我们现在要实现一个小功能:JavaScript 调用本地代码关掉当前 Activity,怎么做呢?

    WebView 设置 JavaScript 接口使用的是方法:

    webView.addJavascriptInterface(Object object, String name)
    

    第一个参数就是接口类,第二个参数是将这个接口对象插入到 JavaScript 上下文中时对应的名字,JavaScript 就是通过这个名字来调用接口中的方法的。

    首先我们来定义这个接口类:

    import android.app.Activity;
    import android.webkit.JavascriptInterface;
    
    import java.lang.ref.WeakReference;
    
    /**
     * Created by iamwent on 21/02/2017.
     *
     * @author iamwent
     * @since 21/02/2017
     */
    
    public class JSCallback {
    
        // avoid memory leak
        private final WeakReference<Activity> weak;
    
        public JSCallback(Activity activity) {
            weak = new WeakReference<>(activity);
        }
    
        @JavascriptInterface
        public void finish() {
            if (!weak.get().isDestroyed()) {
                weak.get().finish();
            }
        }
    }
    

    需要注意的是,出于安全性考虑,在 API 17 及以上,被 @JavascriptInterface 注解的方法才能被调用

    然后我们在 WebView 中加载这个接口:

    webView.addJavascriptInterface(new JSCallback(HomeActivity.this), "native");
    

    在 JavaScript 中的调用就很简单了:

    window.native.finish()
    

    window 是 JavaScript 默认的一个全局对象,native 是我们传递进去的名字,你也可以改成其他的。

    为了避免内存泄漏,我们可以在合适的位置(如:onDestroy())调用以下方法:

    webView.removeJavascriptInterface("native");

    
    另外一种方式呢,就是 native 拦截 webview 的 url,方法如下:
    
    ```java
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            if (request.getUrl().getScheme().equals("native")) {
                // todo
    
                return true;
            }
    
            return super.shouldOverrideUrlLoading(view, request);
        }
    });
    

    Java invoke JavaScript

    native 调用 JavaScript 也有两种方式,其一是使用 webView.loadUrl("javascript:method(params),method 是定义在 JavaScript 中的函数。

    // 没有返回值,需要 JavaScript 再调用 native 方法
    webView.loadUrl("javascript:todo()");
    

    在 Android 4.4 及其以上版本中, WebView 中提供了一个叫做 evaluateJavascript() 的方法,可以用来异步执行 JavaScript 代码,并且这个方法需要在主线程中调用。

    // 在主线程中调用,异步执行
    String script = "";
    webView.evaluateJavascript(script, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            // todo
        }
    });
    

    demo 就不写了,很简单的啦。

    Reading More

    相关文章

      网友评论

          本文标题:Android Using JavaScript in WebV

          本文链接:https://www.haomeiwen.com/subject/zuqzwttx.html