Android Using JavaScript in WebView

在 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,227评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,755评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,899评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,257评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,617评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,757评论 1 221
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,982评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,715评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,454评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,666评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,148评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,512评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,156评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,112评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,896评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,809评论 2 279
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,691评论 2 272

推荐阅读更多精彩内容