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 WKWebView JS原生交互之JS调用OC(附demo)相关推荐

  1. Android 与 JS 的交互 以及 JS与Android 的交互

    Android与JS交互以及JS与Android 的交互 是通过WebView互相调用方法 对于Android调用JS代码的方法有2种: 通过WebView的loadUrl() 通过WebView的e ...

  2. ios与java交互_5、与iOS、Android的交互 实践篇——主动调用

    本文属于「Unity与iOS.Android平台的整合」系列文章之一,转载请注明出处. 主要讲解Unity与iOS.Android平台相互主动调用实现 零.前言 由于本文涉及到较多基础知识,建议读者们 ...

  3. iOS AudioQueue实现音频的录制和播放(附Demo)

    #基于AudioQueue实现音频的录制和播放 文章目录 背景 总览 Audio Queue 架构 AudioQueueBuffer数据结构 创建 AudioQueueBuffer 释放 AudioQ ...

  4. iOS SDK详解之视频播放(AVPlayer)附Demo

    原创Blog,转载请注明出处 http://blog.csdn.net/hello_hwc?viewmode=list 我的stackoverflow 前言 最近在研究视频播放,所以研究了下这个类,学 ...

  5. android WebView通过js方法与原生交互

    根据WebView里面的链接字符串跳转Activity activityBaseWebAddWebView.setWebViewClient(new WebViewClient() {@Overrid ...

  6. java与js交互,相互调用传参

    随着前端技术的发展与H5的广泛使用,移动端采用native+h5的方式越来越多了,对于Android来说就涉及到java与js的交互,相互调用传参等.下面就来看一下java与js交互的简单demo. ...

  7. js原生、jquery单选框radio总结(获取值、设置默认选中值、样式)

    单选框 radio总结: 一.页面样式截图: <div class="radio-inline"><input type="radio" na ...

  8. ios wkwebview弹框_iOS 加载WKWebView

    WKWebView是苹果在iOS 8之后推出的框架WebKit中的浏览器控件, 其加载速度比UIWebView快了许多, 但内存占用率却下降很多, 也解决了加载网页时的内存泄露问题. WKWebVie ...

  9. iOS WKWebView和JS交互的两种方式

    2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...

最新文章

  1. [翻译] Ruby Golf
  2. Angular2 组件通信
  3. Zeal编程查询,离线文档浏览器
  4. C2679 二进制 没有找到接受 std::string 类型的右操作数的运算符(或没有可接受的转换)
  5. Bitcoin0.21版 公链开发(1) Bitcoind 、Bitcoin-qt编译
  6. HTML比较常用的标签
  7. Java 代码复用 —— 泛型
  8. Linux下手动挂载新增磁盘
  9. ORACLE 10G RAC 10.2.0.5 删除节点
  10. 君康人寿2019年排名_2019中国保险公司竞争力报告出炉 君康人寿盈利能力排名第二...
  11. 程序员理想中的工作环境是什么样的?
  12. 网页三栏布局五种实现方式(左中右)
  13. 开发调试指令大全--(博通开发调试命令)
  14. 论文笔记 Object-Aware Instance Labeling for Weakly Supervised Object Detection - ICCV 2019
  15. 如何定位公众号形象,有什么方法
  16. 典型相关分析(Matlab实现函数)
  17. Android中的传感器之---加速度传感器
  18. springboot中使用Mybatis_plus
  19. ESO+LTV MPC算法笔记
  20. 微信营销软件可靠吗?

热门文章

  1. STlink下载出现st-link usb communication error解决方法
  2. Vue-router 报NavigationDuplicated的可能解决方案
  3. 【问题解决方案】ImportError: No module named ‘openpyxl‘/‘xlrd’
  4. Akka的好用例[关闭]
  5. 在JavaScript函数中定义全局变量
  6. yum工具安装Nginx
  7. Spring Boot Admin 2.0开箱体验
  8. 手把手 | Python代码和贝叶斯理论告诉你,谁是最好的棒球选手
  9. 基础 —— ip地址与子网掩码的认识
  10. 补第四周作业总结——8 puzzle