iOS WKWebView JS原生交互之JS调用OC(附demo)

释放双眼,带上耳机,听听看~!

 

Demo下载地址:https://github.com/msbaby520/WKWebViewJSCallOC


2019.02.26 更新
注意: iOS12起不再支持UIWebView,请采用WKWebView

No longer supported; please adopt WKWebView.

UIKIT_EXTERN API_DEPRECATED("No longer supported; please adopt WKWebView.", ios(2.0, 12.0)) API_UNAVAILABLE(tvos, macos) @interface UIWebView : UIView <NSCoding, UIScrollViewDelegate>UIKIT_EXTERN API_DEPRECATED("No longer supported; please adopt WKWebView.", ios(2.0, 12.0)) API_UNAVAILABLE(tvos, macos) @interface UIWebView : UIView <NSCoding, UIScrollViewDelegate>

———————————————- 分割线 ———————————————-
 

WKWebView和UIWebView区别和其优缺点

大家都知道自从iOS8之后,推出了WKWebView,相较于UIWebView来说,性能和其稳定性也提高了不少,当然也有它的坑,大家自行选择,这里我用的是WKWebView

WKWebView相比于UIWebView浏览器之间内核引擎的区别

  • JS调用OC
    比如网页里有一个返回按钮,点击的时候需要pop到上一层。

OC

@interface ViewController ()<WKNavigationDelegate,WKScriptMessageHandler>
@property(nonatomic,strong) WKWebView *webView;
@end
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"backClick"];
}
- (void)viewWillDisappear:(BOOL)animated{
[super viewWillAppear:animated];
self.navigationController.navigationBarHidden = NO;
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"backClick"];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
if ([message.name isEqualToString:@"backClick"]) {
//  message.body js传过来的参数 为id类型 NSArray,NSDictionary,NSString等等
[self.navigationController popViewControllerAnimated:YES];
}
}

注意:addScriptMessageHandler很容易引起循环引用,导致控制器无法被释放,所以必须在vc销毁前把它移除

JS

	  window.webkit.messageHandlers.方法名.postMessage(参数);

注意:webview 和webkit的方法是不一样的,webkit是上面的写法?
一开始我调了半天,安卓可以,iOS死活不行,后来查资料才知道是这个原因,调不通的童鞋可以让同事检查下代码

注意:postMessage()中,有且必须只有一个参数,不传参数时写null。

// 传null
window.webkit.messageHandlers.方法名.postMessage(null);
// 传字典              
window.webkit.messageHandlers.方法名.postMessage({name:'小明',gender:'男'});
// 传字符串
window.webkit.messageHandlers.方法名.postMessage('hello');
// 传数组
window.webkit.messageHandlers.方法名.postMessage(['小明','小华','小亮']);

效果
在这里插入图片描述

人已赞赏
iOS文章

iOS WKWebView相比于UIWebView浏览器之间内核引擎的区别

2020-2-25 10:26:56

iOS文章

iOS UILabel加载html点击图片查看大图 附demo

2020-2-25 12:24:55

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索