js 与 oc的交互_oc与js交互图-优快云博客

本文链接：https://blog.youkuaiyun.com/lck8989/article/details/118996824

本文介绍了如何在iOS应用中使用WebViewJavascriptBridge库实现Objective-C与JavaScript之间的通信。通过示例代码展示了如何注册和调用双方的方法，使得两者能够相互调用并传递数据。

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

首先oc要想与js交互通信，需要oc项目中加入第三方包 WebViewJavascriptBridge

找到这个链接里面有详细的用法示例，介绍的还挺详细的，这里贴出来一个应用：

首先在ios工程中创建一个webview:

- (void)viewDidLoad {
    [super viewDidLoad];

    WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    // 这里有个js oc通信的桥
    self.bridge = [WebViewJavascriptBridge bridgeForWebView: webView];
    [self registerJSBridgeFunctions];
    
    [self callJsBridgeFunctionByName:@"showAlert" andData:@"red" andCallback:^(id data){
        NSLog(@"data is %@",data);
    }];
    
    self.view = webView;
    NSURL *url = [NSURL URLWithString:@"http://10.0.2.206:7456"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
    
    NSLog(@"webview is %@",webView);

}

还有个专门负责注册oc调用js方法的：

-(void) registerJSBridgeFunctions {
    [self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"ObjC Echo called with: %@", data);
        responseCallback(data);
    }];
    [self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
        NSLog(@"ObjC received response: %@", responseData);
    }];
    
    [self.bridge registerHandler:@"showAlert" handler:^(id data, WVJBResponseCallback responseCallback) {
            responseCallback(@"showAlert");
    }];
}

能成功引入这个类是在viewController.h中加入了

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>
#import "WebViewJavascriptBridge/WebViewJavascriptBridge.h"

@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet WKWebView *webview;
@property WebViewJavascriptBridge* bridge;

@end

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 = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    setupWebViewJavascriptBridge((bridge) => {
        console.log("bridge is ",bridge);

        bridge.registerHandler('JS Echo',(data,callback) => {
            console.log('JS Echo called with:',data);
            callback(data);
        });

        // oc调用js方法
        bridge.registerHandler('showAlert',(data,callback) => {
            console.log('data is ',data);
            console.log('callback is ',callback);
            callback('收到');
        });

        // js调用oc方法
        bridge.callHandler('ObjC Echo',{'1': 'lck'},(responeData) => {
            console.log("js received response is ",responeData);
        });
    });
})();

是不是很简单，动起来实践一下吧