ios端与js交互(WebView+WKWebView)

需求:1点击js登入按钮将用户账号和密码传给移动端
2将地东段的token传给html端

ios端
有3种方法
1:webview的javascriptCore
2:webkit
3:uir拦截
4:第三方库

理论:js与oc相互调用并且传值 我们可以理解成河2边需要送东西的过程 我们需要在js和oc之间搭建一个桥梁而jsexport就是这做桥梁,有了桥梁以后在2端传值我们还需要一个对象(快递员)
就好比现实中js在桥的一段,而移动端在桥的这一边现在他们需要给彼此送东西那么就需要一个快递员(对象)理解了吧,哈哈。好了现在我们来举个例子

第一种方法jscascriptcore
第一步搭建2端之间桥梁javascriptcore

1)导入javascriptCore
Build phass->link binary with libraries
添加头文件

import<JavaScriptCore/JavaScriptCore.h>

2)初始化桥梁
@property(nonatomic,strong)JSContext *jsContext;
在web的webViewDidFinishLoad:代理方法中
self.jsContext = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
让js中的快递员搬运工也让oc所持有
self.jsContext[@"objcet"] = self;

self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    context.exception = exception;
    NSLog(@"错误信息:%@",exception);
};

3创建快递员其中object就是js端的对象 一般是js端创建好的我们移动端只要引用这个快递员
self.jsContext[@"objcet"] = self;
好了现在桥梁有了搬运工也有了现在我们需要给搬运工一个交通工具(代理方法)

4)创建对象传递工具—摩托车(代理方法) 注意:交通工具是js端定义的,一般都是协商好的 下面的getcall就是快递员需要搭乘的交通工具而callstring这个字符串就是快递
@protocol JSObjcDelegate <JSExport>

  • (void)getcall:(NSString *)callString;
    @end

5)oc端接收快递不对,接收值
-(void)getcall:(NSString *)callstring{
}
好了,js端可以给oc传值了 完成了

二:oc给js传值

js端定义个点击事件 call()并且该点击事件被obj对象(这个对象就是oc对象)持有当触发call事件时会调用oc端的call方法
我们这这里可以给js端传值
<input type="button" value="js端接收oc传值" onclick="obj.call()">

//oc给js传值:js点击按钮获取oc中的值---也就是点击js端触发call事件时调用occall方法 我们可以在理做原生的push pop等
-(void)call{

// 调用js中的Call1方法
JSValue *Callback = self.jsContext[@"Call1"];
//传值给web端call1函数字符串
[Callback callWithArguments:@[@"我是oc端传给js端的值测试值:123456789"]];

}
js端call1函数方法
var Call1 = function(str)
{
alert(str);
}

————————————————WKWebView中js交互
WKWebview
和webview差不多只不过我们的桥梁变成了
WKUserContentController *conntentController
这家伙可以充当我们的桥梁作用
而且它有一个方法可以让我oc端直接监听到js端的某一个快递员 其中第一个参数是代理,name:就是js端的快递员名字
[conntentController addScriptMessageHandler:self name:@"getUserandPwd"];
js端只要在需要传值得函数中加入以下函数
其中getUseranPwd就是需要监听的快递员名字,而postMessage()中是需要传送的值
window.webkit.messageHandlers.getUserandPwd.postMessage(xxxx)

当我们js端的方法被触发而里面的快递员将会被派送出去oc端也监听到了快递员来了接下来就需要签收快递
我们在下面这个方法中来接收快递
其中第一个参数是初始化wkweb时的配置信息可以打印一下,而后面的message就是消息体(快递单里面有快递员名字,电话和快递)其中
message.name—>快递员名字
message.body——>快递(js端传来的值)
如果js端创建了多个快递员那么我们需要根据名字来分别接受快递(处理)
注意:这个方法是关键我们相互传至的关键
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

oc给js传值
例子:oc无法直接给js端触发事件的函数传智,只能当js端点击了某一个按钮给oc端派送一个空的快递 我们oc端监听到了然后传智给js端(调用js端的函数)
[self.web evaluateJavaScript:Call1Result completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"111%@", error);
}];
其中:第一个函数是函数名字 block中显示调用结果
下面的列子其中Call(str)就是js端的某一个函数而str是值
NSString *Call1Result = [NSString stringWithFormat:@"Call1('%@')",str];

完整代码
初始化web
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
WKUserContentController *conntentController = [[WKUserContentController alloc]init];

//获取js端需要调用的方法 name是js端的方法名getUserandPwd (message.Body>消息体)

// window.webkit.messageHandlers.getUserandPwd.postMessage(<message.Body>)
//这个是监听js端点击事件当js端触在这2个事件中添加了上面的方法那么这2个点击事件那么我们oc端就可以知道并且做出回应
[conntentController addScriptMessageHandler:self name:@"getUserandPwd"];
[conntentController addScriptMessageHandler:self name:@"CallGet"];

config.userContentController = conntentController;

self.web = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];

self.web.UIDelegate = self;
[self.view addSubview:self.web];

在web的这个delegate方法 不然会报错

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

    NSLog(@"%@",message);

    //必须要加上这句不然不执行
    completionHandler();

}

监听
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

// //oc代码传给js端
if ([message.name isEqualToString:@"CallGet"]) {

    [self shareJS];
    //js传值给oc
} else if ([message.name isEqualToString:@"getUserandPwd"]){
    //接收js端传值
    NSString *UserStr = [NSString stringWithFormat:@"%@",message.body[@"user"]];
    NSString *PassWordStr = [NSString stringWithFormat:@"%@",message.body[@"password"]];
    
    NSLog(@"我是js端传过来的值:用户名%@ 密码:%@",UserStr,PassWordStr);

}

}

-(void)shareJS{

NSString *str = @"OC给js端传过去的测试值--随便写吧我爱鹿晗";
NSString *Call1Result = [NSString stringWithFormat:@"Call1('%@')",str];
//OC调用JS
[self.web evaluateJavaScript:Call1Result completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@"111%@", error);
}];

}

js端代码
<button onclick="copyText()">登入-传值给client</button>

function copyText() {

  <!--wkweb使用-->
  window.webkit.messageHandlers.getUserandPwd.postMessage({user:document.getElementById("user").value,password:document.getElementById("password").value});


    <!--webvieiw使用其中object就是对象(快递员)getcall(NSStirng *)-->


}

<input type="button" value="js端接收oc传值" onclick="call()">
</div>

<h1>回调展示区</h1>
<textarea id ="returnValue" type="value" rows="5" cols="40">


function Call1(str)
{
document.getElementById("returnValue").value = str;

}
function call() {
window.webkit.messageHandlers.CallGet.postMessage(null);
alert('你你好我叫郑伊健');
}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 跟原生开发相比,H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势,至少不用等待审...
    大冲哥阅读 1,838评论 0 7
  • 前言 Web 页面中的 JS 与 iOS Native 如何交互是每个 iOS 猿必须掌握的技能。而说到 Nati...
    幽城88阅读 2,201评论 1 8
  • 最近在做的项目重点就是原生app与js的交互,以前也做过但是并没有深入的了解和研究过,因为这个项目我尝试了三种方式...
    Www刘阅读 14,219评论 3 53
  • 我不过是旅人,在这陌生的城市飘荡,迷茫而又充满希望,想着有一天,飘啊飘啊,飘到了梦想的地方。国美,加油!
    笔歌墨舞阅读 101评论 0 1
  • 门面房,店高两米八。粉红色墙壁,玻璃柜,呈列着奶粉,烟酒。白色的货架,摆满了品种繁多的商品。位于交通要道,三岔路口...
    玉妮阅读 371评论 10 6