iOS和JS交互(含OC、html、js)代码不使用第三方库(二)

追风舟

已于 2022-06-23 14:14:28 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：侵掠如火 Object-C Html5 文章标签： javascript ios 交互

于 2016-12-21 15:01:36 首次发布

本文链接：https://blog.youkuaiyun.com/whuizhou/article/details/53784970

侵掠如火 Object-C 同时被 2 个专栏收录

46 篇文章

订阅专栏

Html5

10 篇文章

订阅专栏

本文详细介绍了如何在Objective-C中使用WebViewJavascriptBridge实现iOS与JavaScript的交互，无需第三方库。提供了完整的OC和HTML代码示例，包括调用方法和数据传递的解析，帮助开发者深入理解两者之间的通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近研究研究OC和JS互动的WebViewJavascriptBridge的用法

网上似乎有好多的关于OC和js互动的例子，但是没有一个完成的。今天我就把我的OC代码和Html代码统统的放出来。在说说网上的例子都是一个样没有一点区别，其实你关注洲洲哥的简书就够了。
github地址：GitHub - 7General/WebViewJS: Object-c和js交互

今天以WebViewJavascriptBridge的5.0.5也就是最新的版本来示范。

跟着我的代码一块来

1. 使用CocoaPods导入WebViewJavascriptBridge

这里我们使用最新版本

pod 'WebViewJavascriptBridge', '~> 5.0.5'

导入工程的shell命令这里我就不多说了。

2. 编写OC代码（先写oc代码还是Js代码都可）

引入头文件#import "WebViewJavascriptBridge.h"

创建两个属性

@property (nonatomic, strong) UIWebView * webView;

@property WebViewJavascriptBridge* bridge;

初始化WebView和WebViewJavascriptBridge

 self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
 [self.view addSubview:self.webView];
 /**开启日志*/
 [WebViewJavascriptBridge enableLogging];
 /**初始化-WebViewJavascriptBridge*/
 self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
 [self.bridge setWebViewDelegate:self];

3. JS调用OC代码

NOTICE:我们在写这里的调用代码之前，我们一定要知道前端js函数里一定要知道函数名称。这个很重要。
这里我们假设前端有个函数名称是callViewLoad他要调用OC的代码给返回来的数据最列表处理。

看看OC的代码如何处理Js发来的请求

[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"前端发送的数据 %@", data);
    if (responseCallback) {
    // respons给前端的数据
    responseCallback(@{@"UName": @"洲洲哥的技术博客",@"URLS":@"http://www.jianshu.com/users/1338683b18e0/latest_articles"});
    }
    }];

来说说这里的参数说明
handler的回调中有data、responseCallback两个参数

这其中的data是前端js函数给后端传送的数据：比如在登陆的时候，就要把账户信息和用户密码传入后端，给后端处理。这里的data就是存放着两个数据的
responseCallback是我们要给前端js函数返回的数据内容，前端给我们传入了用户名和密码，我们调用接口之后返回登陆结果给前端就是要用他了。但是以字典形式返回。

到这里我们的JS调用OC，oc端的代码已经说完了。

前端JS代码的写法

html的代码写法

<html>
 <head>
     <title>OC和JS互动Web</title>
     <script>
         /*这段代码是固定的，必须要放到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)
         }

     /**与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
     setupWebViewJavascriptBridge(function(bridge) {
          /**OC调用JS代码不含参数*/
          bridge.registerHandler('UserLogin', function() {
                                 alert('UserLogin')
          })
          /**OC调用JS代码含参数*/
          bridge.registerHandler('UserLoginInfo', function(data, responseCallback) {
                 responseCallback({'userId': '123456', 'Names': 'ZHOUZHOUGEDEBOKE'})
         })

          // **********************************JS调用OC
          bridge.callHandler('callViewLoad', {'blogURL': 'http://www.henishuo.com'}, function(responseCallback){
                                         alert(responseCallback.UName)
          })
     })
 </script>
 </head>
 <body>
     <button style = "background: yellow; height: 50px; width: 100px;">JS/OC互动</button>
 </body>
</html>