iOS与网页JS交互

随着移动APP的快速迭代开发趋势，越来越多的APP中嵌入了html网页，但在一些大中型APP中，尤其是电商类APP，html页面已经不仅仅满足展示功能，这时html要求能与原生语言进行交互、相互传值。比如携程APP中一个热门景点的网页中，点击某个景点，可以跳转到原生中的该景点详情页控制器。

为此，我整理了三种最常用最便捷有效的OC与JS交互的方式，供大家学习交流。

第一种：JS给OC传值。

1. 技术方案：使用JavaScriptCore.framework框架

 

2. 使用场景： 网页中代码中的某个方法，比如点击事件方法，将该方法的参数传值给OC，供OC使用。 

比如：携程APP中一个热门景点的网页中，有很多个热门景点，点击某个景点的图片或名称，可以跳转到原生中的该景点详情页控制器。

 

3. 代码实现如下：

OC里要实现的代码：

拖入JavaScriptCore.framework静态库，遵守

UIWebViewDelegate

代理协议。 

在-webViewDidFinishLoad:方法里编写如下代码：

- (void)webViewDidFinishLoad:(UIWebView *)webView{

JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

context[@"passValue"] = ^{

NSArray *arg = [JSContext currentArguments];
for (id obj in arg) {
NSLog(@"%@", obj);
}
};

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

其中 passValue 是JS的函数名，得到的 arg数组 里面为JS的 passValue 函数的参数，即 JS要传给OC的参数。

JS里要实现的代码：

function testClick()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;

passValue(str1,str2);
}

1
2
3
4
5
6
7
1
2
3
4
5
6
7

在需要给OC传值的函数里（例如：

testClick（）

）直接调用 

passValue（）

函数，将值传进去即可。

第二种：JS给OC传值。

1. 技术方案：使用自定义url方法，每次点击网页

 

2. 使用场景： 网页中代码中的某个方法，比如点击事件方法，将该方法的参数传值给OC，供OC使用。 

比如：携程APP中一个热门景点的网页中，有很多个热门景点，点击某个景点的图片或名称，可以跳转到原生中的该景点详情页控制器。

 

3. 代码实现如下：

JS里要实现的代码：

function testClick()
{

var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;

//  "objc://"为自定义协议头;
//  str1&str2为要传给OC的值,以":/"作为分隔
window.location.href="objc://"+":/"+str1+":/"+str2;
}

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

在需要给OC传值的函数里（例如：

testClick（）

）写如上格式的代码。

其中 

objc://

 是自定义的协议头，

str1

与

str2

为JS要传给OC的值。

OC里要实现的代码：

//遵守UIWebViewDelegate代理协议。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//拿到网页的实时url
NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding];

//在url中寻找自定义协议头"objc://"
if ([requestStr hasPrefix:@"objc://"]) {

// 以"://"为中心将url分割成两部分，放进数组arr
NSArray *arr = [requestStr componentsSeparatedByString:@"://"];
NSLog(@"%@",arr);

//取其后半段
NSString *paramStr = arr[1];
NSLog(@"%@",paramStr);

//以":/"为标识将后半段url分割成若干部分，放进数组arr2，此时arr2[0]为空，arr2[1]为第一个传参值，arr2[2]为第二个传参值，以此类推
NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"];
NSLog(@"%@",arr2);

//取出参数，进行使用
if (arr2.count) {
NSLog(@"有参数");
[self doSomeThingWithParamA:arr2[1] andParamB:arr2[2]];
}else{
NSLog(@"无参数");
}
return NO;
}

return YES;
}
//对JS传来的值进行调用
- (void)doSomeThingWithParamA:(id)paramA andParamB:(id)paramB{

NSLog(@"%@    %@", paramA, paramB);
}

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
32
33
34
35
36
37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

e2a3
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

第三种：利用第三方库实现JS与OC的相互传值。

1. 技术方案：使用WebViewJavascriptBridge三方库

 

2. 使用场景： 网页中代码中的某个方法，比如点击事件方法，将该方法的参数传值给OC，供OC使用。 

比如：携程APP中一个热门景点的网页中，有很多个热门景点，点击某个景点的图片或名称，可以跳转到原生中的该景点详情页控制器。 

或者将原生中的用户信息传递给网页，以便其个性化展示

 

3. 代码实现如下：

OC传值给JS

JS里需要实现的代码：

function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

//调用上面定义的函数
setupWebViewJavascriptBridge(function (bridge){

//OC传值给JS 'testJavascriptHandler'为双方自定义好的统一方法名；'data'是OC传过来的值；'responseCallback'是JS接收到之后给OC的回调
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
//打印OC传过来的值
log('ObjC called testJavascriptHandler with', data)

var responseData = { 'Javascript Says':'Right back atcha!' }

log('JS responding with', responseData)

//给OC的回调
responseCallback(responseData)

})

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
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

OC里需要实现的代码：

导入第三方库WebViewJavascriptBridge；遵守

UIWebViewDelegate

；

//设置第三方Bridge是否可用
[WebViewJavascriptBridge enableLogging];

//关联webView和bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:web];

[_bridge setWebViewDelegate:self];

//OC给JS传值，双方自定义一个统一的方法名'testJavascriptHandler'；data里即为要传过去的值
[_bridge callHandler:@"testJavascriptHandler" data:@{@"年龄":@"20"}];

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

JS传值给OC

JS里需要实现的代码：

//点击网页上一个按钮时
callbackBt.onclick = function()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;

//JS给OC传值。'passValue'为双方自定义的统一方法名；'str1'&'str2'为要传的值； response为OC收到后给JS的回调
bridge.callHandler('passValue', {str1,str2}, function(response) {
})

}

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

OC里需要实现的代码：

导入第三方库WebViewJavascriptBridge；遵守

UIWebViewDelegate

；

//设置第三方Bridge是否可用
[WebViewJavascriptBridge enableLogging];

//关联webView和bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:web];

[_bridge setWebViewDelegate:self];

//js给oc传值.'passValue'为双方自定义的统一方法名；'data'为JS传过来的值；'responseCallback'为OC收到值后给JS返回的回调
[_bridge registerHandler:@"passValue" handler:^(id data, WVJBResponseCallback responseCallback) {

//打印js传过来的值
NSLog(@"%@", data);

//返回给js的值
responseCallback(@"收到了");
}];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17