首先打开webstorm，将最下面h5拷贝到html中。然后导入工程

#define kMessageHandlerName @"mymobile"

1.创建配置类

- (WKWebView *)webView{
if (!_webView) {

WKWebViewConfiguration *config =[[WKWebViewConfiguration alloc]init];

config.preferences.javaScriptEnabled = YES;
/** 默认是不能通过JS自动打开窗口的，必须通过用户交互才能打开 */
config.preferences.javaScriptCanOpenWindowsAutomatically = YES;
_webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];

_webView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);

_webView.allowsBackForwardNavigationGestures = YES;//打开左划回退功能
_webView.navigationDelegate = self;
_webView.UIDelegate = self;
_webView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_webView];

}

return _webView;

}

2.加载H5页面

NSURL *path = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:path]];

3 注入对象名称 kMessageHandlerName

- (void)viewWillAppear:(BOOL)animated{
        [super viewWillAppear:animated];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:kMessageHandlerName];
}

- (void)viewDidDisappear:(BOOL)animated{
     [super viewDidDisappear:animated];
     [self.webView.configuration.userContentController removeScriptMessageHandlerForName:kMessageHandlerName];
}

/**代理方法
JS通过mymobile发送数据到iOS端时，在代理中接收
var message = {"method":"call","args":"let go"};
window.webkit.messageHandlers.mymobile(注:这里是注入的对象名).postMessage(message);
*/
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

NSDictionary *dic = message.body;

NSString *method = dic[@"method"];

if ([method isEqualToString:@"call"]) {

[self call];
      }

NSLog(@"dic = %@", dic);
}

- (void)call{

UIAlertController *sheet = [UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
[sheet addAction:[UIAlertAction actionWithTitle:@"拍照" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
//调用js
NSString *js = [NSString stringWithFormat:@"gotoCall()"];
[self.webView evaluateJavaScript:js completionHandler:nil];

}]];

[sheet addAction:[UIAlertAction actionWithTitle:@"不要点我" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

}]];
    [sheet addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
    [self presentViewController:sheet animated:YES completion:nil];

}

/**  在JS端调用alert函数时，会触发此代理方法（确认框） */

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:nil message:message preferredStyle:UIAlertControllerStyleAlert];
      [alertVC addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil]];
      [self presentViewController:alertVC animated:YES completion:nil];

completionHandler();
}

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-size: 40px;
}
</style>
</head>

<body>

<div style=" margin-top: 150px">

<p></p>

<div>
<button id="call">拍照</button>
</div>

<script type="text/javascript">

call.onclick = function() {
var message = {"method":"call","args":"let go"};
window.webkit.messageHandlers.mymobile.postMessage(message);
};

function gotoCall(){
alert('调用了OC中的alert')
}

</script>

</body>

</html>

WKWebView与Js交互的更多相关文章

  1. ios WKWebView 与 JS 交互实战技巧

    一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...

  2. WKWebView与JS交互，UIWebView+JavascriptCore和JS交互

    最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...

  3. WKwebView与JS交互(h5主动）

    先:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler // 创建一个webiview的配置项 WKWebViewConfiguratio ...

  4. WKWebView与js交互中产生的内存泄漏

    最近开发中突然发现富文本帖子详情内存没有释放掉,找了好久问题都没找到,终于今天发现了问题,先上一点代码片段 WKWebViewConfiguration *configuration = [[WKWe ...

  5. iOS（WKWebView）OC与JS交互 之三

      随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...

  6. WKWebView新特性及JS交互

    引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...

  7. iOS（UIWebView 和WKWebView）OC与JS交互 之二

    在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...

  8. UIWebView和WKWebView的使用及js交互

    UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复 ...

  9. 【Swift】WKWebView与JS的交互使用

    一.前言 近日,有朋友问我关于WKWebView与JS的交互问题,可我之前一直使用的是UIWebView,也不曾做过WKWebView的交互啊!接下来大家一块学习下WKWebView是怎么实现原生代码 ...

随机推荐

  1. libimobiledevice命令

    Mac 安装 1. 安装HomeBrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...

  2. ios9 新关键字 __kindof 等(etc) 小结

    首先__kindof:规定参数为UITableViewCell(举例)这个类或者其子类.比如说一个NSArray<UIView *>*,如果不加__kindof,这个数组只能有UIView ...

  3. Hadoop-2.6.0安装文档

    前段时间在dataguru上报了一个hadoop的培训班,希望能够帮助自己更快的了解.掌握并且熟悉hadoop的开发和原理. 上一期的作业是要自己搭建一个hadoop的环境,并能运行mapreduce ...

  4. Win7安装mysql数据库、修改默认密码

    学习和使用myslq数据库半年时间,mysql对于每一个开发人员都不会陌生.今天对电脑重装系统,为了方面测试在个人PC上安装了mysql数据库.以一下是整个安装过程. 一.下载mysql 1.首先需要 ...

  5. sublime 3 增加php开发插件

    1.PHP语法自动完成插件 https://github.com/erichard/SublimePHPCompanion 2.ThinkPHP自动完成插件 https://github.com/ya ...

  6. 关于 HSSF 和 XSSF 功能的开发者入门指南 (Apache POI 操作 Excel)

    关于 HSSF 和 XSSF 功能的开发者入门指南 笔者深夜无眠,特此对本文翻译一部分,未完成部分待后续更新 本文源文地址 意欲使用 HSSF 和 XSSF 功能快熟读写电子表格?那本文就是为你而写的 ...

  7. 淘淘商城_day07_课堂笔记

    今日大纲 讲解订单系统 基于订单系统完成下单功能的开发 使用Solr完成商品的搜索功能 订单系统 说明:订单系统只是做讲解,不做开发. 导入taotao-order 表结构 订单表: 订单商品表: 疑 ...

  8. hdu 1531 King

    首先吐槽一下这个题目的题意描述,我看了半天才明白. 下标全部都是乱标的!!!!出题者能不能规范一点下标的写法!!!! 差分约束系统 #include<cstdio> #include< ...

  9. Misha and Palindrome Degree

    Misha and Palindrome Degree 题目链接:http://codeforces.com/problemset/problem/501/E 贪心 如果区间[L,R]满足条件,那么区 ...

  10. scp免密码传送文件

    一.单向 ssh-keygen -t rsa 单向无密码访问远程服务器操作比较简单,比如服务器A需要无密码访问服务器B(A–>B),那么只需要在服务器A生成密钥对,将生成的公钥上传到服务器B的相 ...