iOS - OC和网页JS的交互

最新推荐文章于 2021-07-22 13:18:43 发布

___庄大姐

最新推荐文章于 2021-07-22 13:18:43 发布

阅读量5k

点赞数 2

分类专栏： iOS笔记文章标签： ios ios开发 webview

本文链接：https://blog.csdn.net/boring_cat/article/details/51240819

版权

iOS笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

我们知道，在iOS开发过程中，有时候会用webview加载一张网页，网页上有一些按钮或者其他的一些链接，要使这些按钮有实际的作用，1⃣️要么就是网页部分在HTML文件内部自己实现方法，2⃣️要么就是通过OC和网页的交互，在本app内OC实现点击网页的按钮，可以触发自己OC写的方法。
下面我讲两种常用的方法。
第一种是遵守webview的协议，通过实现协议方法截取网络请求，通过这个截取到的网络请求进行解析，然后实现自己的方法。
第二种方法是用了一个叫WebViewJavascriptBridge 的第三方库进行桥接，这个方法就比较强大了，它既可以在oc部分写实现代码，也可以在网页JS部分写实现代码。
先放上我整理后的demo下载链接：
本人github上的JSandOC交互的demo
并且附上我参考的这个库下载地址为：（里面有demo，可以学着看看）
github上的下载地址

好了现在先上图，说明一下，现在的网页上的按钮和我本app内部，需要做哪些交互。
网页的图片
此页面为webview加载的图片，要做的便是分别点击这5个按钮（Facebook分享、QQ分享、微信分享、短信分享、邮件分享）在app内部得到响应。分享集成部分再次就不多说了，谢谢。

方法一：webview协议截取网络请求

app部分（OC部分）
1.设置webview 加载网页
2.实现协议方法
3.实现网络截取后相应的方法

- (void)viewDidLoad {
    [super viewDidLoad];


    UIWebView * webview = [[UIWebView alloc]initWithFrame:self.view.bounds];
    webview.delegate = self;
    //http://127.0.0.1/WEB/initHtml.html  是我放在自己服务器的网页文件
    [webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://127.0.0.1/WEB/initHtml.html"]]];
    [self.view addSubview:webview];
}

#pragma mark ---webview协议方法
#pragma mark ---拦截web网络请求
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    //获取自己的网络请求的网址字符串
    NSString *url = request.URL.absoluteString;
    //自己定义的协议前缀  网页部分一会儿也是要设置成这个协议！
    NSString *scheme = @"xmg://";
    //打印出自己获取的网络请求的网址是什么
    NSLog(@"~~~~~ %@",url);
    //解析网址前缀是否为@"xmg://"
    if ([url hasPrefix:scheme])
    {
        //截出方法名
        NSString *actionName = [url substringFromIndex:scheme.length];、
        //动态方法选择器 比如我获取的网址是xmg://mailShare  则会执行mailShare这个方法
        [self performSelector:NSSelectorFromString(actionName) withObject:nil];
        //不加载这个网络请求的页面
        return NO;
    }
    //YES:加载这个网络请求的页面
    return YES;
}

-(void)mailShare{
   NSLog(@"1shareMail");
}

-(void)facebookShare{
    NSLog(@"facebookShare");
}

网页部分
在图片连接处修改：

如图，只需要在连接的地方，将href的改成自己设定的协议+方法名即可！

这个方法比较简单！

方法二：利用WebViewJavascriptBridge第三方库进行JS和OC的桥接

1.app部分（OC部分）
①在新开的工程引用静态库
CoreGraphics.framework
Foundation.framework
UIKit.framework
WebKit.framework
②导入WebViewJavascriptBridge第三方库
③在使用的页面加入头文件WebViewJavascriptBridge.h 这个文件内包含了其他文件，所以只用导入这一个
④开始写代码

#import "ViewController.h"
#import "WebViewJavascriptBridge.h"
@interface ViewController ()<UIWebViewDelegate>

//声明`WebViewJavascriptBridge`对象为属性
@property (nonatomic,strong)  WebViewJavascriptBridge * bridge;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

-(void)viewWillAppear:(BOOL)animated{
    if (_bridge) { return; }

    //用UIWebView加载web网页
    UIWebView * webview = [[UIWebView alloc]initWithFrame:self.view.bounds];
    webview.delegate = self;
    [self.view addSubview:webview];

    //设置能够进行桥接
    [WebViewJavascriptBridge enableLogging];

    _bridge = [WebViewJavascriptBridge bridgeForWebView:webview];

    [_bridge registerHandler:@"facebookObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@" ======FacebookObjcCallback =========  %@", data);

        //传话给网页说已经接收到
        responseCallback(@"facebookObjcCallback回复网页，已经收到消息");

        //

    }];

    [_bridge registerHandler:@"QQShareObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@" ======QQShareObjcCallback ========= %@", data);

        //传话给网页说已经接收到
        responseCallback(@"QQShareObjcCallback回复网页，已经收到消息");


    }];

    [_bridge registerHandler:@"WXShareObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@" ======WXShareObjcCallback =========  %@", data);

        //传话给网页说已经接收到
        responseCallback(@"WXShareObjcCallback回复网页，已经收到消息");

        //

    }];

    [_bridge registerHandler:@"MessageShareObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@" ======MessageShareObjcCallback =========  %@", data);

        //传话给网页说已经接收到
        responseCallback(@"MessageShareObjcCallback回复网页，已经收到消息");

        //

    }];

    [_bridge registerHandler:@"MailShareObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@" ======MailShareObjcCallback =========  %@", data);

        //传话给网页说已经接收到
        responseCallback(@"MailShareObjcCallback回复网页，已经收到消息");

        //

    }];

    // oc传话给JS（网页执行）  网页部分会执行以下代码：
    /*
     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
     log('ObjC called testJavascriptHandler with', data)
     var responseData = { 'Javascript Says':'Right back atcha!' }
     log('JS responding with', responseData)
     responseCallback(responseData)
     })
     接收
     */

    //网页接收OC的方法句柄名叫testJavascriptHandler  此时OC给JS传的数据是@{ @"foo":@"before ready" }
    [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];

   // 自定义按钮 此处没用，需要的可以自己打开使用
   // [self renderButtons:webView];
    //当你没有把网页放入服务器的话，可以把网页放在本地工程，这个时候就要执行以下的方法，用NSBoundle加载本地文件
   // [self loadExamplePage:webview];

}

 //自定义按钮
 - (void)renderButtons:(UIWebView*)webView {
    UIFont* font = [UIFont fontWithName:@"HelveticaNeue" size:12.0];

    UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [callbackButton setTitle:@"呼叫JS的Handle" forState:UIControlStateNormal];
    [callbackButton addTarget:self action:@selector(callHandler:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:callbackButton aboveSubview:webView];
    callbackButton.frame = CGRectMake(10, 400, 100, 35);
    callbackButton.titleLabel.font = font;
}

 //可以通过自定义按钮实现方法，动态和JS进行交互
 //注：本代码中没有写按钮去实现此方法，需要的同学可以自己去定义按钮实现此方法
 - (void)callHandler:(id)sender {

    id data = @{ @"OC第一次发信息给JS": @"Hi there, JS,I am OC !" };
    // testJavascriptHandler是JS部分接收OC传送消息的方法句柄
    // data 是OC给JS传的数据
    // response是JS接收到消息后给OC传的数据
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"JS收到消息后，回复给OC的消息为: %@", response);
    }];

}

//加载本地网页
//本代码中的网页是从服务器获取，不是放在本地，放在本地的同学，可以用以下的方法加载
- (void)loadExamplePage:(UIWebView*)webView {
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"codetest" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}

2.网页部分（JS部分）
①在script标签内写桥接方法
②在a标签内记得表面id唯一标示，以便script能够获取此标签元素

<script>
        window.onerror = function(err) {
            log('window.onerror: ' + err)
        }

    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) {
                                 // JS注册接收消息的部分 名字叫testJavascriptHandler 
                                 // function是接收消息后做的处理
                                 bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {

                                                        var responseData = { 'Javascript Says':'Right back atcha!'};

   //给OC的消息回执
                                                                            responseCallback(responseData);
                                                        });

                                 document.body.appendChild(document.createElement('br'));

                                 //facebook连接出发方法
                                 var facebookButton = document.getElementById('Facebook');
                                 facebookButton.onclick = function(e) {
                                        e.preventDefault();
                                        <!-- log('JS calling handler "FacebookObjcCallback"')-->
                                        //桥接呼叫OC句柄：facebookObjcCallback  
                                        //并传送数据{'foo': 'bar'}过去
                                        bridge.callHandler('facebookObjcCallback', {'foo': 'bar'}, function(response) {
                                        //JS接收到OC的消息回执
                                                    <!--log('JS got response', response)-->
                                                           });
                                 };


                                 var QQShareBtn = document.getElementById('QQShare')
                                 QQShareBtn.onclick = function(a){
                                 a.preventDefault();
                                 bridge.callHandler('QQShareObjcCallback',{'QQ':'share'},function(response){

                                                    });

                                 };

                                 var wxShareBtn = document.getElementById('WXShare')
                                 wxShareBtn.onclick = function(a){
                                 a.preventDefault();
                                 bridge.callHandler('WXShareObjcCallback',{'WX':'share'},function(response){

                                                    });

                                 };


                                 var messageShareBtn = document.getElementById('MessageShare')
                                 messageShareBtn.onclick = function(a){
                                 a.preventDefault();
                                 bridge.callHandler('MessageShareObjcCallback',{'Message':'share'},function(response){

                                                    });

                                 };


                                 var mailShareBtn = document.getElementById('MailShare')
                                 mailShareBtn.onclick = function(a){
                                 a.preventDefault();
                                 bridge.callHandler('MailShareObjcCallback',{'Mail':'share'},function(response){

                                                    });

                                 };

                                 });


        </script>

 <div class="share_box row-eq-height">
        <div class="share_box_bg">
            <div class="col-xs-3 share_btn share_btn_left" style="">
                來分享給好友！            </div>
            <div class="col-xs-9  share_btn">
                <div id='log'>
                    <a href="" id='Facebook'> <img  src="http://152.101.133.203:82/O2OBeauty/assets/images/invite_friend/invitefd_02-02.png"></a>


                    <a href="" id='QQShare'> <img  src="http://152.101.133.203:82/O2OBeauty/assets/images/invite_friend/invitefd_02-03.png"></a>

                    <a href="" id="WXShare"> <img  src="http://152.101.133.203:82/O2OBeauty/assets/images/invite_friend/invitefd_02-04.png"></a>

                    <a href="" id="MessageShare"> <img  src="http://152.101.133.203:82/O2OBeauty/assets/images/invite_friend/invitefd_02-05.png"></a>

                    <a href="" id="MailShare"> <img  src="http://152.101.133.203:82/O2OBeauty/assets/images/invite_friend/invitefd_02-06.png"></a>
                </div>

            </div>
        </div>
    </div>

总结：
1⃣️利用桥接的话，就可以进行双方的通信，JS部分可以做回执处理，OC部分也可以做回执处理。
注意点就是JS的Handle要命名好，OC部分的Handle也要命名好，不要搞混淆。
2⃣️而利用webview的协议方法的话，好处是只要双方规定了某一个协议，比如xmg://或其他，
单方面在OC处的webview协议方法解决，解析截取到的网络请求，这种方法实现起来比较快捷，
坏处就是，JS得不到回执啦（但好像也不是什么坏处）~

大家根据自己的需求选择自己适合的方法吧，谢谢大家能够看完！

___庄大姐

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
iOS - OC和网页JS的交互

我们知道，在iOS开发过程中，有时候会用webview加载一张网页，网页上有一些按钮或者其他的一些链接，要使这些按钮有实际的作用，1⃣️要么就是网页部分在HTML文件内部自己实现方法，2⃣️要么就是通过OC和网页的交互，在本app内OC实现点击网页的按钮，可以触发自己OC写的方法。下面我讲两种常用的方法。第一种是遵守webview的协议，通过实现协议方法截取网络请求，通过这个截取到的网络请求
复制链接

扫一扫

专栏目录