• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

js(javascript)与ios(Objective-C)相互通信交互

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

随着苹果SDK的不断升级，越来越多的新特性增加了进来，本文主要讲述从iOS6至今，Native与JavaScript的交互方法

一、UIWebview && iframe && JavaScript  <=iOS6

iOS6原生没有提供js直接调用Objective-C的方式，只能通过UIWebView的UIWebViewDelegate协议

 
1
navigationType

方法来做拦截，并在这个方法中，根据url来调用Objective-C方法

1.javascript调用Objective-C

动态添加个iframe改变其地址 最后删除,这种方法不会使当前页面跳转 效果更佳

javascript代码:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
{
;
;
)
{
;
}
;
;
;
;
;
}

 

 
1
2
使用方法
/>

Objective-C代码:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
 
;
    
{
;
//如果是自己定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法
;
;
;
)
{
;
}
/*
* 方法的返回值是BOOL值。
* 返回YES：表示让浏览器执行默认操作，比如某个a链接跳转
* 返回NO：表示不执行浏览器的默认操作，这里因为通过url协议来判断js执行native的操作，肯定不是浏览器默认操作，故返回NO
*
*/
;
}
;
}

 

 
1
2
3
4
5
6
7
8
9
{
;
;
{
;
;
}
;
}

 

2.Objective-C调用javascript

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//插入js 并且执行传值
{
:
;
;
;
;
}

 

 
1
2
3
4
//提交form表单
{
;
}

 

 
1
2
3
4
5
//修改标签属性
{
;
;
}

 

(PS)如果你想去掉webview弹出的alert 中的来自XXX网页

 
1
2
3
4
5
webView
{
//重定义web的alert方法,捕获webview弹出的原生alert  可以修改标题和内容等等
;
}

 

 
1
2
3
4
)
{
  
}

 

二、JavaScriptCore && UIWebview >=iOS7

iOS7中加入了JavaScriptCore.framework框架。把 WebKit 的 JavaScript 引擎用 Objective-C 封装。该框架让Objective-C和JavaScript代码直接的交互变得更加的简单方便。

合适时机注入交互对象

什么时候UIWebView会创建JSContext环境?

分两种方式

第一在渲染网页时遇到<script标签时，就会创建JSContext环境去运行JavaScript代码。

第二就是使用方法[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]去获取JSContext环境时，这时无论是否遇到<script标签，都会去创造出来一个JSContext环境，而且和遇到<script标签再创造环境是同一个。

什么时候注入JSContext问题

我通常都会在 - (void)webViewDidFinishLoad:(UIWebView *)webView中去注入交互对象，但是这时候网页还没加载完，JavaScript那边已经调用交互方法，这样就会调不到原生应用的方法而出现问题。

改成在- (void)viewDidLoad中去注入交互对象，这样倒是解决了上面的问题，但是同时又引起了一个新的问题就是在一个网页内部点击链接跳转到另一个网页的时候，第二个页面需要交互，这时JSContext环境已经变化，但是- (void)viewDidLoad仅仅加载一次，跳转的时候，没有再次注入交互对象，这样就会导致第二个页面没法进行交互。当然你可以在- (void)viewDidLoad和- (void)webViewDidFinishLoad:(UIWebView *)webView都注入一次，但是一定会有更优雅的办法去解决此问题。

如果上边的方案能满足需求,建议实在迫不得已再用这个方法,  就是在每次创建JSContext环境的时候，我们都去注入此交互对象这样就解决了上面的问题。具体解决办法参考了此开源库UIWebView-TS_JavaScriptContext。

多个iFrame中的JSContext问题

 

 
1
2
3
4
5
6
7
;
{
;
{
;
;
;

 

1. JavaScriptCore调用Objective-C

html中的JS代码

 
1
>

iOS中的代码  UIWebview的delegate

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
webView
{
// 以 html title 设置 导航栏 title
;
// Undocumented access to UIWebView's JSContext
;
// 打印异常
=
)
{
;
;
;
    
// 以 JSExport 协议关联 native 的方法
;
    
// 以 block 形式关联 JavaScript function
=
)
{
;
;
//多参数
=
)
{
;
;
    
}

JSExport 协议关联 native 的方法

Objective-C

 
1
>

 

 
1
2
3
4
5
6
7
title
{
;
;
;
;
}

JavaScript

 
1
>

 

2.Objective-C 调用 JavaScriptCore

Objective-C

调用js的showResult方法，这里是一个参数 result，多个就依次写到数组中

 
1
;

JavaScript

 
1
2
3
4
)
{
;
}

 

三、WKWebView && JavaScript >=iOS8

iOS 8引入了一个新的框架——WebKit，之后变得好起来了。在WebKit框架中，有WKWebView可以替换UIKit的UIWebView和AppKit的WebView，而且提供了在两个平台可以一致使用的接口。WebKit框架使得开发者可以在原生App中使用Nitro来提高网页的性能和表现，Nitro就是Safari的JavaScript引擎 WKWebView 不支持JavaScriptCore的方式但提供message handler的方式为JavaScript 与Native通信.

1.Objective-C  调用JavaScript

 
1
2
3
4
5
6
//执行html 已经存在的js方法
{
{
        
;
}

 

2. JavaScript 调用 Objective-C

JavaScript，简单的封装一下，‘Native’为事先在Objective-C注册注入的js对象

 
1
2
3
4
5
6
7
8
{
;
)
{
;
}
;
}

JavaScript调用

 
1
>

Objective-C实现

 
1
2
3
4
5
6
7
8
9
;
;
// 注入JS对象Native，
// 声明WKScriptMessageHandler 协议
;
 
;
;
;

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#pragma mark - WKScriptMessageHandler
userContentController
{
{
;
//如果是自己定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法
;
;
        
;
        
//调用本地函数
)
{
;
}
    
}
}

 

注：本文除了第三种方法之外，前两种JavaScript交互方法都和Android开发兼容，仅仅是api略不同。

demo地址: https://github.com/shaojiankui/iOS-WebView-JavaScript

 

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
[Objective-C语言教程]继承（25）发布时间：2022-07-12
下一篇：
总结Objective-c常用算法发布时间：2022-07-12
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap