# JSBridge实现篇-IOS
# web端代码
先写一下web端的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="js调用IOS方法1" onclick="onIOSFunction1('js调用ios方法1')">
<input type="button" value="js调用IOS方法2" onclick="onIOSFunction2()">
<script>
// 调用 IOS 方法1
function onIOSFunction1(str) {
window.webkit.messageHandlers.IOSTestFunction1.postMessage({
msg: str
});
}
// 调用 IOS 方法2
function onIOSFunction2() {
window.webkit.messageHandlers.IOSTestFunction2.postMessage({});
}
// IOS 回调 onFunctionIOS 方法
window.onFunctionIOS = function (str) {
alert("我是web网页里的代码");
return 'onFunctionIOS 方法已经调用完成';
}
</script>
</body>
</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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
# ios端 webview
//
// ViewController.m
// ImoocHybridIOSNative
#import "ViewController.h"
#import <WebKit/WebKit.h>
#import "Constants.h"
@interface ViewController ()<WKNavigationDelegate,WKUIDelegate, WKScriptMessageHandler>
@property (nonatomic, strong) WKWebView *webView;
@property (nonatomic, strong) WKWebViewConfiguration *wkWebViewConfiguration;
@property (nonatomic, strong) WKUserContentController *wkUserContentController;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initWebView];
}
- (void)initWebView {
//配置wkWebViewConfiguration
[self wkConfiguration];
//初始化webView
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:self.wkWebViewConfiguration];
self.webView.backgroundColor = [UIColor whiteColor];
self.webView.navigationDelegate = self;
self.webView.UIDelegate = self;
NSURL *url = [NSURL URLWithString:WEB_URL];
// 为保证演示效果设置缓存策越为不缓存
NSURLRequest *request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:10];
[self.webView loadRequest: request];
[self.view addSubview:self.webView];
//OC注册供JS调用的方法
[self addScriptFunction];
}
- (void)wkConfiguration {
self.wkWebViewConfiguration = [[WKWebViewConfiguration alloc]init];
WKPreferences *preferences = [[WKPreferences alloc] init];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
self.wkWebViewConfiguration.preferences = preferences;
}
#pragma mark - OC注册供JS调用的方法，IOS 注入 jsbridge 对象名为 webkit
- (void)addScriptFunction {
self.wkUserContentController = [self.webView configuration].userContentController;
[self.wkUserContentController addScriptMessageHandler:self name:@"IOSTestFunction1"];
[self.wkUserContentController addScriptMessageHandler:self name:@"IOSTestFunction2"];
}
#pragma mark - Alert弹窗
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
UIAlertController * alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message ? : @"" preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction * action = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}];
[alertController addAction:action];
[self presentViewController:alertController animated:YES completion:nil];
}
#pragma mark --- WKScriptMessageHandler ---
//OC在JS调用方法做的处理
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//前端主动JS发送消息，前端指令动作
if ([@"IOSTestFunction1" isEqualToString:message.name]) {
[self IOSTestFunction1:message.body];
} else if ([@"IOSTestFunction2" isEqualToString:message.name]) {
[self IOSTestFunction2:message.body];
}
}
#pragma mark - 与 Android 不同，IOS可以直接接收一个对象Object数据
- (void)IOSTestFunction1:(id)body {
NSDictionary *dict = body;
NSString *msg = [dict objectForKey:@"msg"];
UIAlertController * alertController = [UIAlertController alertControllerWithTitle:@"提示" message:msg preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction * action = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:nil];
[alertController addAction:action];
[self presentViewController:alertController animated:YES completion:nil];
}
#pragma mark - 调用该方法，回调 web 端 onFunctionIOS 方法，并传递字符串
- (void)IOSTestFunction2:(id)body {
[self.webView evaluateJavaScript:@"onFunctionIOS('IOSTestFunction2方法执行完成')" completionHandler:^(id result, NSError * _Nullable error) {
NSLog(@"%@", result);
}];
}
@end
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110