WebView中JavaScript交互【Android】

zrunker

已于 2022-06-23 17:03:52 修改

阅读量1.9k

点赞数

分类专栏：伴职创作「banzhi.cc」文章标签： webview android javascript

于 2022-06-23 17:02:26 首次发布

本文链接：https://blog.csdn.net/qq_19405541/article/details/125430724

版权

伴职创作「banzhi.cc」专栏收录该内容

12 篇文章 0 订阅

订阅专栏

守住心底那最美风景，成为一种风度，宁静而致远；守住记忆里最美风景，成为一种境界，悠然而豁达；守住生命中最美风景，成为一种睿智，淡定而从容。

书客创作

WebView是移动端用来加载网页的控件，而应用要想直接与加载好的网页进行交互，可以通过js也就是JavaScript脚本来完成，所谓交互是指网页可以调用应用内方法（Java方法），应用也可以添加或调用网页相应内容。那么具体该如何实现呢？

要想让WebView支持JavaScript，要添加以下属性：

//设置WebView支持JavaScript
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

首先看看交互的网页tel.html，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="theme-color" content="#2932e1">

<title>爱书客</title>
<style type="text/css">
#hideElem {
	position: absolute;
	top: 25%;
	left: 50%;
}
#telElem {
	position: absolute;
	top: 30%;
	left: 50%;
	cursor: pointer;
	text-decoration: none;
}
#mobileElem {
	position: absolute;
	top: 35%;
	left: 50%;
	cursor: pointer;
	text-decoration: none;
}
</style>
</head>
<body>
    <span id="hideElem">隐藏内容</span>
    <a id="telElem" href="tel:10086" title="拨号10086">10086</a>
    <a id="mobileElem" href="javascript:;" onclick="mobile()">移动端调用</a>
</body>
<script>
	// 获取电话号码
	function getTel() {
		return document.getElementById('telElem').innerHTML;
	};
	// 移动设备调用
	function mobile() {
        var tel = document.getElementById('telElem').innerHTML;
        // 调用android本地方法
        window.jsObj.clickOnAndroid(tel);
	};
</script>
</html>

网页效果图

网页部分我写了三个标签，id分别是为hideElem，telElem，mobileElem。通过操作hideElem实现应用向网页添加JavaScript功能，通过操作telElem实现应用调用网页JavaScript功能，通过操作mobileElem实现网页调用应用Java方法。

这里为了演示，将以上网页引入本地文件assets，通过操作本地网页来说明WebView是如何通过JavaScript实现交互。

WebView.loadUrl("file:///android_asset/tel.html");

注意1：本地文件放在assets文件中，assets文件是main的子文件，与res文件同级。
注意2：设置WebView支持加载本地文件。

WebSettings webSettings = webView.getSettings();
// 允许加载Assets和resources文件
webSettings.setAllowFileAccess(true);

这里不再对WebView的基础使用进行介绍，有兴趣可以去看这篇文章【Android】移动端WebView的使用（一）初体验了解更多。

一、应用向网页添加JavaScript

功能要求：当网页加载完成后，应用通过向网页添加JavaScript实现id为hideElem的标签隐藏。
通过实现WebView的WebViewClient属性，可以实现网页加载完成后进行相应的逻辑操作。

webView.setWebViewClient(new WebViewClient() {
    // 页面加载结束
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 编写javaScript方法-执行修改样式
        String javascript = "javascript:function hide() {" +
                          "document.getElementById('hideElem').style.display='none';" +
                        "}";
        // 网页添加方法
        view.loadUrl(javascript);
        // 执行方法
        view.loadUrl("javascript:hide();");
    }
});

其实添加JavaScript只需要三步：
1、编写JavaScript，注意js语法规则即可。

String javascript = "javascript:function hide() {" +
                          "document.getElementById('hideElem').style.display='none';" +
                        "}";

2、网页添加JavaScript，通过loadUrl(js)方法进行添加。

view.loadUrl(javascript);

3、执行JavaScript，通过javascript:方法。

view.loadUrl("javascript:hide();");

二、应用调用网页JavaScript

功能要求：调用网页中getTel()方法，实现拨号功能。

分析：网页中getTel()方法，返回要拨打的电话号码，那么只要执行getTel()并获取该方法的返回值，之后跳转到拨号页面即可。
那么该如何获取网页中JavaScript方法的返回值呢？

方式一：在Android SDK4.4以上版本提供evaluateJavascript()方法来获取返回值。

webView.setWebViewClient(new WebViewClient() {
    // 页面加载结束
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 支持4.4以上的版本
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view.evaluateJavascript("javascript:getTel()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Log.d("JsonResult", value);
                    // 实现拨号功能
                }
            });
        }
    }
});

但是该方法只支持4.4以上版本，那个该如何解决低版本的问题呢？

方式二：WebView同时提供onJsAlert方法来监听网页中的alert方法，可以利用这一点来实现。
首先向网页中添加JavaScript脚本方法，让该方法能够实现alert(getTel())。

webView.setWebViewClient(new WebViewClient() {
    // 页面加载结束
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 编写javaScript方法-执行网页js
        String script = "javascript:function addMethod() {" +
                    "document.getElementById('telElem').setAttribute('href','javascript:;');" +
                    // "document.getElementById('customerTel').href='javascript:;';" +
                    "document.getElementById('telElem').onclick = function() {alert(getTel());}" +
                    "}";
        view.loadUrl(script);
        view.loadUrl("javascript:addMethod();");
    }
});

最后通过监听alert方法来获取电话号码，并实现拨号功能。

webView.setWebChromeClient(new WebChromeClient() {
    // 监听网页alert方法
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        result.confirm();
        // 执行拨号
        Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + message));
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        startActivity(intent);
        return true;
    }
});

三、网页调用应用Java方法

功能要求：网页通过调用应用中的Java方法，将需要拨号的电话号码传递过来，之后由应用实现拨号。

实现网页调用Java方法其实很简单，只需要三步即可。
1、WebView添加addJavascriptInterface。

webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void clickOnAndroid(String result) {
        Toast.makeText(WebViewActivity.this, result, Toast.LENGTH_LONG).show();
        // 执行相应的逻辑操作-拨号
    }
}, "jsObj");

2、网页中添加JavaScript方法进行调用。

// 移动设备调用
function mobile() {
    var tel = document.getElementById('telElem').innerHTML;
    // 调用android本地方法
    window.jsObj.clickOnAndroid(tel);
};

3、执行JavaScript方法。

<a id="mobileElem" href="javascript:;" onclick="mobile()">移动端调用</a>

注意：
A、WebView添加JavaScriptInterface的时候要设置名称，在本例中为“jsObj”。
B、在JavaScriptInterface调用方法中添加@JavascriptInterface才能生效。
C、网页中是通过window.jsObj.方法，来实现调用的。

通常为了解决WebView与JavaScript混淆问题，需要将JavaScriptInterface封装。以上代码可以修改成：

public class JavaScriptMixUpEvent {
    private Context context;


    public JavaScriptMixUpEvent(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void clickOnAndroid(String result) {
        Toast.makeText(context, result, Toast.LENGTH_LONG).show();
        // 执行相应的逻辑操作
    }

}

webView.addJavascriptInterface(new JavaScriptMixUpEvent(this), "jsObj");

阅读原文
 Github地址

微信公众号：伴职创作

zrunker

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
WebView中JavaScript交互【Android】

WebView是移动端用来加载网页的控件，而应用要想直接与加载好的网页进行交互，可以通过js也就是JavaScript脚本来完成，所谓交互是指网页可以调用应用内方法（Java方法），应用也可以添加或调用网页相应内容。那么具体该如何实现呢？......
复制链接

扫一扫