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

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

}

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

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！