UIWebView与JS的交互方式
一，OC调用JS
直接调用苹果提供的API
|
1
|
- (nullable
NSString
*)stringByEvaluatingJavaScriptFromString:(
NSString
*)script;
|
使用方式：
OC部分：
|
1
|
[
self
.webView stringByEvaluatingJavaScriptFromString:@
"add(1,2)"
];
|
JS部分：
|
1
2
3
|
function add(a,b) {
return
a+b;
}
|
二，JS调用OC
OC处理JS的时机在UIWebView的代理方法内
|
1
|
- (
BOOL
)webView:(UIWebView *)webView shouldStartLoadWithRequest:(
NSURLRequest
*)request navigationType:(UIWebViewNavigationType)navigationType;
|
使用方式：
JS部分：
|
1
2
3
|
function btnClick1() {
location.href =
"jsCallBack://method_?param1¶m2"
}
|
OC部分：
|
1
2
3
4
5
|
NSString
*schem = webView.request.URL.scheme;
if
([schem containsString:@
"jsCallBack://"
]) {
//action...
return
NO
;
}
|
WKWebView与JS的交互方式
一，OC调用JS
调用苹果提供的API
|
1
|
- (
void
)evaluateJavaScript:(
NSString
*)javaScriptString completionHandler:(
void
(^ _Nullable)(_Nullable
id
,
NSError
* _Nullable error))completionHandler;
|
使用方式：
OC部分：
|
1
|
[
self
.wkWebView evaluateJavaScript:@
"playSount()"
completionHandler:
nil
];
|
JS部分：
|
1
2
3
|
function playSount() {
//playSount...
}
|
二，JS调用OC
OC部分：
这种使用方式比较麻烦一些
1.在创建wkWebView时，需要将被js调用的方法注册进去
|
1
2
3
4
5
6
|
//创建WKWebViewConfiguration文件
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences.minimumFontSize = 10.f;
[config.userContentController addScriptMessageHandler:
self
name:@
"playSound"
];
//创建WKWebView类
WKWebView *webView = [[WKWebView alloc] initWithFrame:
self
.view.bounds configuration:config];
|
2.在WKScriptMessageHandler代理方法中监听js的调用
|
1
2
3
4
5
6
7
|
#pragma mark - WKScriptMessageHandler
- (
void
)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if
([message.name isEqualToString:@
"playSound"
]) {
[
self
playSound];
}
}
|
JS部分：
|
1
2
3
4
|
//JS响应事件
function btnClick() {
window.webkit.messageHandlers.playSound.postMessage(null);
}
|
利用JavaScriptCore库，WebView与JS的交互
一，OC调用JS
|
1
2
3
4
5
|
self
.jsContent = [[JSContext alloc] init];
NSString
*js = @
"function add(a,b) {return a + b}"
;
[
self
.jsContent evaluateScript:js];
JSValue *jsValue = [
self
.jsContent[@
"add"
] callWithArguments:@[
@2
,
@3
]];
|
二，JS调用OC
|
1
2
3
4
5
6
|
self
.jsContent = [[JSContext alloc] init];
self
.jsContent[@
"add"
] = ^(
int
a,
int
b){
NSLog
(@
"a+b = %d"
,a+b);
};
[
self
.jsContent evaluateScript:@
"add(10,20)"
];
|
三，JS直接访问OC对象方法与属性
1.首先定义一个协议，这个协议遵守JSExport协议
|
1
2
3
4
5
|
@protocol
JSExportTest <JSExport>
@property
(
nonatomic
, assign)
NSInteger
sum;
JSExportAs(add, - (
NSInteger
)add:(
int
)a b:(
int
)b);
@end
|
其中JSExportAs（）是系统提供的宏，用来声明在JS环境中方法add与OC环境中方法- (NSInteger)add:(int)a b:(int)b对应。
2.创建一类，遵守JSExportTest协议，并实现它什么的方法与属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
@interface
JSProtolObj :
NSObject
<JSExportTest>
@end
@implementation
JSProtolObj
@synthesize
sum = _sum;
- (
NSInteger
)add:(
int
)a b:(
int
)b {
return
a+b;
}
- (
void
)setSum:(
NSInteger
)sum {
_sum = sum;
}
@end
|
3.使用方式：
|
1
2
3
4
5
6
7
8
9
|
self
.jsContent = [[JSContext alloc] init];
self
.jsContent.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception = exception;
NSLog
(@
"exception:%@"
,exception);
};
self
.jsContent[@
"OCobj"
] =
self
.jsProtolObj;
[
self
.jsContent evaluateScript:@
"OCobj.sum = OCobj.add(10,20)"
];
|
这三种使用方式可以根据实际情况进行适当使用