iOS与h5交互可以分为两部分,一部分是UIWebView与h5交互,一部分是WKWebView与h5交互,
1.UIWebView与h5交互
h5内URL拦截
可以在代理方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;中拦截实现
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString * urlString = request.URL.absoluteString;
NSString * scheme = request.URL.scheme;
// 可以在此处根据url地址,或者 scheme判断是否需要拦截,返回NO,则不会跳转
return YES;
}
为H5添加js方法
在代理方法
- (void)webViewDidFinishLoad:(UIWebView *)webView;加载完页面之后插入js代码,如给h5页面所有的图片添加点击事件(ps:如果可能的话还是让前段自己加吧~~)
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//添加图片可点击JS
[webView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}"];
}
重点,原生与h5交互,即:原生调用h5方法,h5调用原生方法
首先配置环境,原生要继承JSExport协议(ps:需要导入头文件
<JavaScriptCore/JavaScriptCore.h>),并且添加协议方法提供给h5调用,如:
@protocol JSObjcDelegate <JSExport>
//不带参数调用
- (void)call;
//带参数调用
- (void)getCall:(NSString *)callString;
@end
然后在控制器中创建UIWebView并设置代理,实现刚刚声明的协议 JSObjcDelegete,并设置一个全局的jsContext
@interface JKUIwebViewTestVC : UIViewController <UIWebViewDelegate, JSObjcDelegate>
@property (nonatomic, strong) JSContext *jsContext;
@property (strong, nonatomic) UIWebView *webView;
@end
在
- (void)webViewDidFinishLoad:(UIWebView *)webView代理方法中设置jsContext,因为如果webView中有链接跳转,就必须要重新设置,否则h5无法调用原生方法,下方JKAPP是提供给h5调用的对象(PS:建议把所有的UI操作都放到主线程操作,否则的话有可能导致线程崩溃,是有可能~~~~)
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"JKAPP"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
最后实现JSObjcDelegete方法,就可以提供给h5调用了,原生可以用JSValue去调用h5方法,具体如下
- (void)call {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"" message:@"\(^o^)/~h5调用原生成功" preferredStyle:(UIAlertControllerStyleAlert)];
UIAlertAction * cancleAction = [UIAlertAction actionWithTitle:@"确定" style:(UIAlertActionStyleCancel) handler:nil];
[alert addAction:cancleAction];
[self presentViewController:alert animated:YES completion:nil];
});
}
- (void)getCall:(NSString *)callString {
JSValue *Callback = self.jsContext[@"alerCallback"];
[Callback callWithArguments:@[@"原生去调用h5了"]];
}
h5可以这样调用原生方法
<input type="button" value="h5唤起原生方法(call)"
onclick="JKAPP.call()">
</div>
<div>
<input type="button" value="h5唤起原生方法getCall:(NSString
*)callString传值,并且原生调用h5方法" onclick="call()">
</div>
遇到问题总结
1.在代理方法中操作UI偶尔导致线程崩溃
解决方案:所有UI操作都放到主线程操作
2.jsContext对象注入失败.
原因:h5在页面加载时需要获取一些原生内的信息,此时页面尚未加载,jsContext对象尚未注入,获取信息失败,js代码不在加载
解决方案1.先是h5在页面加载完成之后再去获取jsContext对象获取信息,但是尝试失败了,对象仍然没有注入成功.然后h5在页面加载完成时添加了一个短暂延时,,然后再去获取信息,成功解决问题.
解决方案2.猜测,未证实!!!我们h5中是先加载页面,最后加载js,此时页面加载完成,js不一定加载完成,有可能导致js对象注入失败,猜测,先加载js,在加载页面,然后在页面加载完成时去获取对象加载信息,有可能能解决问题.
JSValue *Callback = self.jsContext[@"alerCallback"]; [Callback callWithArguments:@[@"原生去掉用h5了"]];
此方法有可能导致线程崩溃,而且频率不低.
解决办法:
dispatch_async(dispatch_get_main_queue(), ^{
if (weakSelf.jsContext && data.length > 0) {
JSValue *Callback = weakSelf.jsContext[callBack];
[weakSelf.jsContext[@"setTimeout"] callWithArguments:@[Callback, @0, data]];
}
});
使用此方式去回调h5方法,暂未发现崩溃现象,注意
[weakSelf.jsContext[@"setTimeout"] callWithArguments:@[Callback, @0, data]];
其中以@0分割,前面是JSValue对象,后面是参数,如果有多个参数可以使用数组
2.WKWebview与h5交互
h5内URL拦截
可以在代理方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;中拦截实现
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSURL * url = navigationAction.request.URL;
NSString * scheme = [url scheme];
decisionHandler(WKNavigationActionPolicyAllow);
// decisionHandler(WKNavigationActionPolicyCancel);
}
需要注意的是,实现此方法必须要调用decisionHandler这个block否则会导致app崩溃,参数是枚举类型,WKNavigationActionPolicyAllow代表允许加载,WKNavigationActionPolicyCancel代表不允许加载
原生调用h5方法,KWebView 提供了一个
evaluateJavaScript:completionHandler:方法,可以在此方法中实现原生调用js.
- (void)getAlertCall {
NSString *jsStr = [NSString
stringWithFormat:@"alerCallback('%@')",@"原生调用h5中的js成功"];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
}
PS:一定要注意,在WKWebView中alert被拦截掉了,网页不能直接弹出来要在代理方法- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler中自己实现弹窗,并且要调用completionHandler回调,否则会导致程序崩溃
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
NSLog(@"%@", message);
completionHandler();
}
h5调用原生方法,controller需要实现
WKScriptMessageHandler代理,然后设置[configuration.userContentController addScriptMessageHandler:self name:@"call"];其中name为方法名.然后原生在代理- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message中检测js回调,js可以这么调用window.webkit.messageHandlers.call.postMessage("h5调用原生!");,其中call是协商的方法名,postMessage为参数
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"+++++%@++++%@", message.body, message.name);
}
