iOS开发:OC与JS交互

来源：互联网发布：易吧进销存软件怎么样编辑：程序博客网时间：2024/05/08 10:36

前言

最近在iOS开发工作中，公司为了方便维护，并且加快更新的速度，赛用了部分页面的交互方式选择了HTML5，这必然会用到大量的OC与JS的交互。在webview页面，通过进行点击，希望调起本地的页面进行相应的处理。现整理如下，希望能帮到一些人。

目的

为了在webView页面截取到js操作，然后跳出到本地进行处理

第一种方法：使用原生的处理方式：JavaScriptCore框架

1.下边是本地的a.html的源代码

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8"/>        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>        <meta name="viewport"        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>        <script>            function test() {                alert('clicked');            }        function testParams(a, b){            alert(a+b);        }        </script>    </head>    <body>        <button onclick="test()">点击我</button>        <button onclick="testParams('hello', 123)">点击我(带参数)</button>    </body></html>

2.导入JavaScriptCore.framework，在需要调用的web页面加上头文件#import

3.打开本地html文件

 //打开本地html文件    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"a" ofType:@"html"];    NSURL *url = [NSURL fileURLWithPath:filePath];    NSURLRequest *request = [NSURLRequest requestWithURL:url];    [self.webView loadRequest:request];

4.开始截获

- (void)webViewDidFinishLoad:(UIWebView *)webView {    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    context[@"test"] =  ^() {        NSLog(@"在这里便可以捕获到函数名为test的操作，这个操作不带参数");};    context[@"testParams"] =  ^(id data,id secondData) {        NSLog(@"在这里便可以捕获到函数名为testParams的操作，这个操作带两个参数");        NSLog(@"第一个参数是%@，第二个参数是%@",data,secondData);        NSArray *args = [JSContext currentArguments];        for (id obj in args) {            NSLog(@"遍历每一个参数，%@",obj);        }    };}

第二种方法：使用github上的WebViewJavascriptBridge封装库

请注意：WebViewJavascriptBridge封装库，要求JS函数也按照一定标准写

1.引入头文件 #import “WebViewJavascriptBridge.h”，添加@property WebViewJavascriptBridge* bridge;

2.开始添加拦截

if (_bridge) {        return;    }    [WebViewJavascriptBridge enableLogging];    _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];    [_bridge registerHandler:@"hubOrderUpdateDeliveryDate" handler:^(id data, WVJBResponseCallback responseCallback) {        NSDictionary * dataDict = data;        NSLog(@"testObjcCallback called: %@", data);        //在此处进行拦截    }];

后记

在OC与JS的交互中，上述第二种方案是使用率非常高的，WebViewJavascriptBridge被很多人熟知。
WebViewJavascriptBridge有很多方法，包括OC调用JS，JS调OC，很方便，推荐给大家
WebViewJavascriptBridge的github地址

0 0