您的位置：首页 > 移动开发 > IOS开发

iOS WKWebView和JS交互的两种方式

2017-02-18 00:00 106 查看
摘要: 本文介绍两种方式实现iOS WKWebView和JS交互：1、WKWebViewConfiguration注入WKScriptMessageHandler；2、UIWebViewDelegate回调方法中处理

本文介绍两种方式实现iOS WKWebView和JS交互

WKWebViewConfiguration注入WKScriptMessageHandler

UIWebViewDelegate回调方法中处理

WKWebViewConfiguration注入WKScriptMessageHandler

网页很简单，只有一个按钮，点击按钮会触发一个方法，在事件的方法中通过调用 
window.webkit.messageHandlers.NativeModel.postMessage({name: 'zhangyutang', age: 12});
把消息发送给Objc。Objc中需要注入相同名称的model：
NativeModel
。网页代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5page-oc</title>

<script>
function btn1Click() {
window.webkit.messageHandlers.NativeModel.postMessage({name: 'zhangyutang', age: 12});
alert("after call");
}
</script>

</head>
<body>

<input type="button" value="button c" onclick="btn1Click()">

</body>
</html>

Objc代码中在初始化
WKWebView
的时候需要使用
initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration
方法来进行初始化。 
WKWebViewConfiguration
对象需要使用调用方法 
addScriptMessageHandler:name
来设置JS事件的接收处理器，
addScriptMessageHandler:name
方法有两个参数：
ScriptMessageHandler
参数需要是一个实现
WKScriptMessageHandler
了协议的对象；
name
参数是H5页面中调用
postMessage
方法使用到的注入对象的名称，H5页面和原生的页面交互使用通过该对象才可以成功调用。

- (WKWebView *)webView {
if (!_webView) {
WKWebViewConfiguration* config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [WKUserContentController new];
[config.userContentController addScriptMessageHandler:self name:@"NativeModel"];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
_webView.navigationDelegate = self;
}
return _webView;
}

MMWebViewController
类实现了实现 
WKScriptMessageHandler
协议，重写 
userContentController:didReceiveScriptMessage
回调方法 ，在该方法中处理JS的方法调用，关键的代码片段如下。

@interface MMWebViewController () <WKScriptMessageHandler>

@end

@implementation MMWebViewController

#pragma mark - ......::::::: WKScriptMessageHandler :::::::......

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

id body = message.body;

NSLog(@"=== %@", body);
}

@end

UIWebViewDelegate回调方法中处理

重写
UIWebViewDelegate
的回调方法
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler，在该方法中通过判断请求的URL的scheme
来处理特定URL，可以处理原生页面的跳转、原生页面的弹窗等业务逻辑，然后调用
decisionHandler(WKNavigationActionPolicyCancel);
告诉
WKWebView
不用处理这个请求，这个请求已经让原生处理了。简单的代码片段如下

if ([navigationAction.request.URL.scheme isEqualToString:@"plush"]) {
[PTLinkUtil handleURLString:navigationAction.request.URL.absoluteString linkType:PTLinkCustomHandler roomID:0];
decisionHandler(WKNavigationActionPolicyCancel);
return;
} else if ([[navigationAction.request.URL.scheme lowercaseString] isEqualToString:@"lezhua"]) {
if ([[navigationAction.request.URL.host lowercaseString] isEqualToString:@"home"]) {
NSArray *queryItems = [NSURLComponents componentsWithString:navigationAction.request.URL.absoluteString].queryItems;
for (NSInteger i = 0; i < queryItems.count; i++) {
NSURLQueryItem *loopItem = queryItems[i];
if ([[loopItem.name lowercaseString] isEqualToString:@"segmentid"]) {
[UIUtil showWithSegmentID:[validString(loopItem.value) integerValue]];
}
}
}
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Objective-C WKWebView JavaScript
相关文章推荐
新的分享
章节导航