IOS与网页JS交互详解及实例

- (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);
    }
  };

}

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

        passValue(str1,str2);
      }

 function testClick()
      {

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

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

//遵守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);
}

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)

      })

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

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

  [_bridge setWebViewDelegate:self];

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

 //点击网页上一个按钮时
   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) {
                })

   }

 //设置第三方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(@"收到了");
  }];