iOS与网页交互,看我就够了


随着移动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:// 是自定义的协议头,str1str2JS要传给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(@"收到了");
    }];

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

有任何问题,大家可以参考我的CSDN博客,或在评论区留言,我会一一解答。如果这篇文章帮到了你,欢迎打赏请我喝杯茶。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容