oc传参数给js_iOS js和oc传值

url截取重定向(扩展第三方bridge) JSExport JavaScriptCore

js传值给oc。(对应重定向,对应oc->js stringByEvalu )stringByEvaluatingJavaScriptFromString

oc传值给js。 html地址。

https://my.oschina.net/llfk/blog/988725

https://blog.csdn.net/Jason_chen13/article/details/53542488?utm_source=blogxgwz8

随着移动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);

}

};

}

其中 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);

}

在需要给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;

}

在需要给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);

}

第三种：利用第三方库实现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)

})

OC里需要实现的代码：

导入第三方库WebViewJavascriptBridge；遵守UIWebViewDelegate；

//设置第三方Bridge是否可用

[WebViewJavascriptBridge enableLogging];

//关联webView和bridge

_bridge = [WebViewJavascriptBridge bridgeForWebView:web];

[_bridge setWebViewDelegate:self];

//OC给JS传值，双方自定义一个统一的方法名'testJavascriptHandler'；data里即为要传过去的值

[_bridge callHandler:@"testJavascriptHandler" data:@{@"年龄":@"20"}];

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

})

}

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(@"收到了");

}];

需要注意的是：不论哪方给哪方传值，传值的方法名称与对应接收值的方法名称要保持一致。

JS oc相互调用方法：

1.利用定义url调用

2.利用js直接调用

3.利用js里对象调用

首先先创建UIWebView对象，加载本地html文件

//加载本地html文件

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];

//NSString *htmlPath1 = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];

//NSString *htmlPath2 = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];

NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];

_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

[_webView loadHTMLString:htmlString baseURL:nil];

_webView.delegate = self;

[self.view addSubview:_webView];

实现UIWebViewDelegate

//网页是否要加载

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

//网页开始加载

- (void)webViewDidStartLoad:(UIWebView *)webView

//网页加载完成

- (void)webViewDidFinishLoad:(UIWebView *)webView

//网页加载失败

- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error

1.利用定义url调用

js 调用oc：

定义js方法，点击网页上的按钮触发js方法，重定向url，UIWebViewd的代理方法触发

屏幕快照 2016-05-03 下午3.14.25.png

判断定义好的scheme,获取url传过来的值

屏幕快照 2016-05-03 下午3.19.05.png

oc 调用js：

NSString *textJS = @"showAlert('这里是JS中alert弹出的message 第一种方式')";

[_webView stringByEvaluatingJavaScriptFromString:textJS];

2.利用js直接调用

使用第二种和第三种方式时需要加入JavaScriptCore.framework，如果项目要求支持ios7.0之前的需要做兼容

从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了。

首先导入JavaScriptCore.framework

20150725170931474.png

然后导入头文件

#import

更换加载的html文件

屏幕快照 2016-05-03 下午3.34.10.png

web中的js方法

屏幕快照 2016-05-03 下午3.37.36.png

点击web中按钮,通过JScontext直接调用share方法，从JSValue中取值

屏幕快照 2016-05-03 下午3.35.26.png

oc 调用js：

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

//oc 调用 js

NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";

[context evaluateScript:textJS];

3.利用js里对象调用

此处稍微复杂一点我们需要使用到

JSExport

凡事添加了JSExport协议的协议，所规定的方法，变量等 就会对js开放，我们可以通过js调用到

首先在html中创建对象，定义方法

屏幕快照 2016-05-03 下午3.44.27.png

无参方法

TestJSobject.TestNOParameter();

有一个参数的方法

TestJSobject.TestOneParameter(TestJSobject.name);

有两个参数的方法

TestJSobject.TestTwoParameterSecondParameter(TestJSobject.name,TestJSobject.age);

创建oc类，添加协议

屏幕快照 2016-05-03 下午3.47.46.png

实现协议方法

屏幕快照 2016-05-03 下午3.48.01.png

特别注意：

如果js中的参数超过两个，oc中方法名需要分开

js中的方法TestJSobject.TestTwoParameterSecondParameter(TestJSobject.name,TestJSobject.age);oc中的方法-(void)TestTwoParameter:(NSString *)message1 SecondParameter:(NSString *)message2

//js对象调用，创建对象

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

TestJSobject *test = [TestJSobject new];

context[@"TestJSobject"] = test;

oc 调用js：

//同样我们也用刚才的方式模拟一下js调用方法

NSString *jsStr1=@"TestJSobject.TestNOParameter()";

[context evaluateScript:jsStr1];

点击web中的按钮，oc中的协议方法被触发

屏幕快照 2016-05-03 下午4.05.06.png

屏幕快照 2016-05-03 下午4.05.10.png

总结：根据以上几种方法，个人感觉第三种方法能更好的和oc相关联起来，而且还避免了viewController中过于庞大，如果方法多的时候。