整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

WebView制作简易的页面访问

文,仅做为个人学习Android,记录成长以及方便复习!

主要实现功能有!

1.加载页面

2.设置在WebView打开页面(默认调用系统自带或者第三方浏览器)

3.启用JavaScript,和缓存的支持

4.判断页面加载情况,调用ProgressDialog进行页面加载前的过渡

5.添加通过返回键后退到上一页(没有上一页则是退出程序)

首先是设置UI界面,添加一个下载按钮

1.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
 
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
</RelativeLayout>

2.在清单文件AndroidManifest.xml添加网络访问权限

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

3.Activity

MainActivity.xml


WKWebView是iOS8 出来的浏览器控件,用来取代UIWebView.对于WKWebView与UIWebView的对比特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入移动端,并且做JS交互工作.以前写过的JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不适用了,自己做的过程中遇到一些坑,在这里总结一下,做一下记录.

WKWebView加载本地 html文件


现在的项目要求就是使用存储在本地的html文件 js文件 css文件 img图片等文件.我使用HBuilder创建了一个Demo工程.里面包含了基本的文件以及图片资源.如下所示.然后拖到Xcode工程中.

然后我们把整个Html工程文件夹导入工程中.

WKWebView 在iOS 9 有新的加载本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了网上有一些博客说- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加载本地html文件.其实两者都能加载.只是需要把路径写对.第一个方法就不过多叙述了.网上有很多的博客.这里我就用第二个方法来看一下如何加载.

NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];

[_mainWebView loadRequest: request];

  • 1
  • 2
  • 3

运行效果图如下.

Xcode工程中 html文件 加载js文件 css文件 img文件


上面我们加载了html.可是css样式 .img文件和js文件都没有加载出来.那么我们该如何解决呢?(html原始加载图如下所示.)

对于css文件img文件 ,js文件我们只需要把html文件中的文件夹路径删除即可.如下所示.

❗️❗️❗️❗️ 注意:这里是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加载的网页.所有如上设置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要设置本地资源文件所对应的路径! 我们只需要把资源文件所对应的路径设置给readAccessURL 和 baseURL即可(). 例如下面所示.

//假定都在工程根目录之下.

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];

  • 1
  • 2
  • 3

对于js文件,有时候我们发现我们就算如上删除了js文件夹的路径依然不能使用.这是为什么呢?.这里就要去检测查看工程的设置,是否把js文件当成一个可编译文件使用了.我们需要把它移动到资源文件中.这样就能正常加载了.如下图所示.

WKWebView中警告窗 确认面板 输入框的显示


相比于UIWebView,WKWebView对警告窗 确认面板 输入框并不能直接显示.是通过WKUIDelegate代理方法收到对应的回调方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

//接收到确认面板

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

//接收到输入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

我们只需要对上面的回调方法进行实现即可实现显示警告窗 确认面板 输入框等需求.

WKWebView中OC方法调用JS方法


在WKWebView OC方法调用JS方法方法比较简单.我们只需要使用如下方法即可.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

  • 1

看一下我写的例子.在index.js中定义一个方法.方法内容为弹出一个警告框.代码如下所示.

function alertAction(message) {

alert(message);

}

  • 1
  • 2
  • 3

然后在ViewController控制器中定义一个Button.定义它的点击方法.代码如下所示.

- (UIButton *)alertButton{

if (_alertButton == nil) {

_alertButton = [[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];

_alertButton.backgroundColor = [UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];

_alertButton.layer.cornerRadius = 6.0f;

_alertButton.layer.masksToBounds = YES;

_alertButton.titleLabel.font = [UIFont systemFontOfSize:16];

[_alertButton setTitle:@"弹出弹窗" forState:UIControlStateNormal];

[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];

}

return _alertButton;

}

- (void)alertButtonAction{

[self.mainWebView evaluateJavaScript:@"alertAction('OC调用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

因为弹窗不能直接显示.所以我们实现了对应的代理方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此处的completionHandler()就是调用JS方法时,`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这时候我们点击按钮就会调用对应的JS方法了.相比于JavaScriptCore框架还是非常简单的.效果图如下所示.

WKWebView中JS方法调用OC方法


上一个模块我们看到了OC方法调用JS方法.那么JS方法调用OC方法呢?我们也只需要几步就可以完成调用.

第一步.我们需要在WKWebView创建的过程中初始化添加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];

WKUserContentController *userController = [[WKUserContentController alloc] init];

configuration.userContentController = userController;

_mainWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];

[userController addScriptMessageHandler:self name:@"currentCookies"];

  • 1
  • 2
  • 3
  • 4
  • 5

然后实现代理方法.监听JS的回调.为了查看效果,我们仍然使用弹窗的形式展示我们的回调信息.代码如下所示.

//JS调用的OC回调方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

if ([message.name isEqualToString:@"currentCookies"]) {

NSString *cookiesStr = message.body;

NSLog(@"当前的cookie为: %@", cookiesStr);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"JS调用的OC回调方法" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

然后在Html文件中添加点击方法.

<div id="button_div" onclick="buttonDivAction()">

点击调用OC方法

</div>

  • 1
  • 2
  • 3

紧接着.在js文件中实现点击事件.这时候要注意的是ScriptMessageHandler的名称要与上面定义的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

  • 1
  • 2
  • 3
  • 4
  • 5

然后我们点击网页中对应的div就会出现对应的弹窗.效果图如下所示.

并且控制台打印信息如下所示.

总结


相比于UIWebView,WKWebView确实更加的方便快捷.本篇博客就到这里了.如果有任何问题,欢迎在评论区回复骚栋.感谢观看,最后还是附上本篇博客的Demo传送门.

  • 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图

  • 上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现
  • 今天我将全面介绍Android通过WebView与JS交互的全面方式

阅读本文前请先阅读:Android开发:最全面、最易懂的Webview详解


目录


1. 交互方式总结

Android与JS通过WebView互相调用方法,实际上是:

  • Android去调用JS的代码
  • JS去调用Android的代码

二者沟通的桥梁是WebView

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

1. 通过WebView的loadUrl()

2. 通过WebView的evaluateJavascript()

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

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

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

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


2. 具体分析

2.1 Android通过WebView调用 JS 代码

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

1. 通过WebView的loadUrl()

2. 通过WebView的evaluateJavascript()

方式1:通过WebView的loadUrl()

  • 实例介绍:点击Android按钮,即调用WebView JS(文本名为javascript)中callJS()
  • 具体使用:

步骤1:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

  • 为了方便展示,本文是采用Andorid调用本地JS代码说明;
  • 实际情况时,Android更多的是调用远程JS代码,即将加载的JS代码路径改成url即可

需要加载JS代码:javascript.html

// 文本名:javascript

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Carson_Ho</title>

// JS代码

<script>

// Android需要调用的方法

function callJS(){

alert("Android调用了JS的callJS方法");

}

</script>

</head>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

步骤2:在Android里通过WebView设置调用JS代码

Android代码:MainActivity.java

注释已经非常清楚

public class MainActivity extends AppCompatActivity {

WebView mWebView;

Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView =(WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 设置允许JS弹窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先载入JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

button = (Button) findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// 通过Handler发送消息

mWebView.post(new Runnable() {

@Override

public void run() {

// 注意调用的JS方法名要对应上

// 调用javascript的callJS()方法

mWebView.loadUrl("javascript:callJS()");

}

});

}

});

// 由于设置了弹窗检验调用结果,所以需要支持js对话框

// webview只是载体,内容的渲染需要使用webviewChromClient类去实现

// 通过设置WebChromeClient对象处理JavaScript的对话框

//设置响应js 的Alert()函数

mWebView.setWebChromeClient(new WebChromeClient() {

@Override

public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {

AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);

b.setTitle("Alert");

b.setMessage(message);

b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

result.confirm();

}

});

b.setCancelable(false);

b.create().show();

return true;

}

});

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

特别注意:JS代码调用一定要在 onPageFinished() 回调之后才能调用,否则不会调用。

onPageFinished()属于WebViewClient类的方法,主要在页面加载结束时调用

方式2:通过WebView的evaluateJavascript()

  • 优点:该方法比第一种方法效率更高、使用更简洁。
  • 因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。
  • Android 4.4 后才可使用
  • 具体使用

// 只需要将第一种方法的loadUrl()换成下面该方法即可

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {

@Override

public void onReceiveValue(String value) {

//此处为 js 返回的结果

}

});

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.1.2 方法对比

2.1.3 使用建议

两种方法混合使用,即Android 4.4以下使用方法1,Android 4.4以上方法2

// Android版本变量

final int version = Build.VERSION.SDK_INT;

// 因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断

if (version < 18) {

mWebView.loadUrl("javascript:callJS()");

} else {

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {

@Override

public void onReceiveValue(String value) {

//此处为 js 返回的结果

}

});

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

2.2 JS通过WebView调用 Android 代码

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

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

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

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

2.2.1 方法分析

方式1:通过 WebView的addJavascriptInterface()进行对象映射

步骤1:定义一个与JS对象映射关系的Android类:AndroidtoJs

AndroidtoJs.java(注释已经非常清楚)

// 继承自Object类

public class AndroidtoJs extends Object {

// 定义JS需要调用的方法

// 被JS调用的方法必须加入@JavascriptInterface注解

@JavascriptInterface

public void hello(String msg) {

System.out.println("JS调用了Android的hello方法");

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

步骤2:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

需要加载JS代码:javascript.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Carson</title>

<script>

function callAndroid(){

// 由于对象映射,所以调用test对象等于调用Android映射的对象

test.hello("js调用了android中的hello方法");

}

</script>

</head>

<body>

//点击按钮则调用callAndroid函数

<button type="button" id="button1" onclick="callAndroid()"></button>

</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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

详细请看注释

public class MainActivity extends AppCompatActivity {

WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 通过addJavascriptInterface()将Java对象映射到JS对象

//参数1:Javascript对象名

//参数2:Java对象名

mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象

// 加载JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

特点

  • 优点:使用简单

仅将Android对象和JS对象映射即可

  • 缺点:存在严重的漏洞问题,具体请看文章:你不知道的 Android WebView 使用漏洞

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

  • 具体原理:
  1. Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url
  2. 解析该 url 的协议
  3. 如果检测到是预先约定好的协议,就调用相应方法

即JS需要调用Android的方法

  • 具体使用:
  • 步骤1:在JS约定所需要的Url协议
  • JS代码:javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Carson_Ho</title>

<script>

function callAndroid(){

/*约定的url协议为:js://webview?arg1=111&arg2=222*/

document.location = "js://webview?arg1=111&arg2=222";

}

</script>

</head>

<!-- 点击按钮则调用callAndroid()方法 -->

<body>

<button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>

</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后,就会回调shouldOverrideUrlLoading (),接下来继续看步骤2:

步骤2:在Android通过WebViewClient复写shouldOverrideUrlLoading ()

MainActivity.java

public class MainActivity extends AppCompatActivity {

WebView mWebView;

// Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 设置允许JS弹窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 步骤1:加载JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

// 复写WebViewClient类的shouldOverrideUrlLoading方法

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// 步骤2:根据协议的参数,判断是否是所需要的url

// 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)

//假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)

Uri uri = Uri.parse(url);

// 如果url的协议 = 预先约定的 js 协议

// 就解析往下解析参数

if ( uri.getScheme().equals("js")) {

// 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议

// 所以拦截url,下面JS开始调用Android需要的方法

if (uri.getAuthority().equals("webview")) {

// 步骤3:

// 执行JS所需要调用的逻辑

System.out.println("js调用了Android的方法");

// 可以在协议上带有参数并传递到Android上

HashMap<String, String> params = new HashMap<>();

Set<String> collection = uri.getQueryParameterNames();

}

return true;

}

return super.shouldOverrideUrlLoading(view, url);

}

}

);

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

特点

  • 优点:不存在方式1的漏洞;
  • 缺点:JS获取Android方法的返回值复杂。

如果JS想要得到Android方法的返回值,只能通过 WebView 的 loadUrl ()去执行 JS 方法把返回值传递回去,相关的代码如下:

// Android:MainActivity.java

mWebView.loadUrl("javascript:returnResult(" + result + ")");

// JS:javascript.html

function returnResult(result){

alert("result is" + result);

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

在JS中,有三个常用的对话框方法:

方式3的原理:Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调分别拦截JS对话框

(即上述三个方法),得到他们的消息内容,然后解析即可。

下面的例子将用拦截 JS的输入框(即prompt()方法)说明 :

  • 常用的拦截是:拦截 JS的输入框(即prompt()方法)
  • 因为只有prompt()可以返回任意类型的值,操作最全面方便、更加灵活;而alert()对话框没有返回值;confirm()对话框只能返回两种状态(确定 / 取消)两个值

步骤1:加载JS代码,如下:

javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Carson_Ho</title>

<script>

function clickprompt(){

// 调用prompt()

var result=prompt("js://demo?arg1=111&arg2=222");

alert("demo " + result);

}

</script>

</head>

<!-- 点击按钮则调用clickprompt() -->

<body>

<button type="button" id="button1" onclick="clickprompt()">点击调用Android代码</button>

</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了上述JS代码后,就会触发回调onJsPrompt(),具体如下:

  • 如果是拦截警告框(即alert()),则触发回调onJsAlert();
  • 如果是拦截确认框(即confirm()),则触发回调onJsConfirm();

步骤2:在Android通过WebChromeClient复写onJsPrompt()

public class MainActivity extends AppCompatActivity {

WebView mWebView;

// Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 设置与Js交互的权限

webSettings.setJavaScriptEnabled(true);

// 设置允许JS弹窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先加载JS代码

// 格式规定为:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

mWebView.setWebChromeClient(new WebChromeClient() {

// 拦截输入框(原理同方式2)

// 参数message:代表promt()的内容(不是url)

// 参数result:代表输入框的返回值

@Override

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

// 根据协议的参数,判断是否是所需要的url(原理同方式2)

// 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)

//假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)

Uri uri = Uri.parse(message);

// 如果url的协议 = 预先约定的 js 协议

// 就解析往下解析参数

if ( uri.getScheme().equals("js")) {

// 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议

// 所以拦截url,下面JS开始调用Android需要的方法

if (uri.getAuthority().equals("webview")) {

//

// 执行JS所需要调用的逻辑

System.out.println("js调用了Android的方法");

// 可以在协议上带有参数并传递到Android上

HashMap<String, String> params = new HashMap<>();

Set<String> collection = uri.getQueryParameterNames();

//参数result:代表消息框的返回值(输入值)

result.confirm("js调用了Android的方法成功啦");

}

return true;

}

return super.onJsPrompt(view, url, message, defaultValue, result);

}

// 通过alert()和confirm()拦截的原理相同,此处不作过多讲述

// 拦截JS的警告框

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

return super.onJsAlert(view, url, message, result);

}

// 拦截JS的确认框

@Override

public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {

return super.onJsConfirm(view, url, message, result);

}

}

);

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78

  • Demo地址
  • 上述所有代码均存放在:Carson_Ho的Github地址 : WebView Demo

2.2.2 三种方式的对比 & 使用场景


3. 总结

  • 本文主要对Android通过WebView与JS的交互方式进行了全面介绍

  • 关于WebView的系列文章对你有所帮助
  • Android开发:最全面、最易懂的Webview详解
  • Android:你不知道的 WebView 使用漏洞
  • 手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案
  • 接下来我会继续讲解其他安卓开发的知识,有兴趣可以继续关注Carson_Ho的安卓开发笔记!!!!

请评论点赞!因为你们的赞同/鼓励是我写作的最大动力!