iOS 原生与H5交互

第一种: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(@"收到了");
    }];

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

UIWebView页面信息的离线缓存

推荐一个比较好的第三方库RNCachingURLProtocol只需要在AppDelegate中加入下面方法即可。

[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];

地址:https://github.com/rnapier/RNCachingURLProtocol

大千世界,求同存异;相遇是缘,相识是份,相知便是“猿粪”(缘分)
From MZou