JS調用OC方法並傳值，OC調用JS方法並傳值////////////////////////zz

時間 2019-11-15

標籤調用方法欄目 JavaScript 简体版

原文原文鏈接

iOS開發-基於原生JS與OC方法互相調用並傳值（附HTML代碼）

最近項目裏面有有個商品活動界面，要與web端傳值，將用戶在網頁點擊的商品id 傳給客戶端，也就是js交互，其實再說明白一點就是方法的互相調用而已。javascript

本文敘述下如何進行原生的JavaScript交互html

本文包括JS調用OC方法並傳值，OC調用JS方法並傳值java

原本想把html放進服務器裏面，而後訪問，可是以爲若是html在本地加載更有助於理解，特把html放進項目裏web

HTML代碼

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div style="margin-top: 20px"> <h2>JS與OC交互</h2> <input type="button" value="喚起本地方法(call)" onclick="tianbai.call()"> </div> <div> <input type="button" value="喚起getCall:(NSString *)callString傳值" onclick="call()"> </div> <script> var call = function() { var callInfo = JSON.stringify({"jianshu": "http://www.jianshu.com/users/55c8fdc3c6e7/latest_articles"}); tianbai.getCall(callInfo); } var Callback = function(str) { alert(str); } var alerCallback = function() { alert('成功'); } </script> </body> </html>

上面html的代碼：創建了兩個button服務器

第一個button綁定了 tianbai.call() 方法，這裏 tianbai 是一個對象，這個對象的做用下面OC代碼中會說明， tianbai.call() 表明 tianbai 對象調用call() 方法ui

第二個button綁定了 call() 的方法，調用的是下面JavaScript中的 call() 方法，在 JavaScript 的 call() 裏面，定義一個 callInfo 參數，方法中tianbai.getCall(callInfo) 表明 tianbai 對象調用 getCall 方法並傳參數 callInfo ，下面兩個方法是OC調用JavaScript方法，其中Callback傳回str，alerCallback爲OC僅調用JavaScript方法！atom

OC代碼

demo採用原生的JavaScriptCore類lua

引入三個名詞：url

JSContext：給JavaScript提供運行的上下文環境
JSValue：JavaScript和Objective-C數據和方法的橋樑
JSExport：這是一個協議，若是採用協議的方法交互，本身定義的協議必須遵照此協議

ViewController.h中的代碼(代碼過長，方法說明都在註釋裏)spa

#import <UIKit/UIKit.h> //導入頭文件 #import <JavaScriptCore/JavaScriptCore.h> @protocol JSObjcDelegate <JSExport> //tianbai對象調用的JavaScript方法，必須聲明！！！ - (void)call; - (void)getCall:(NSString *)callString; @end @interface ViewController : UIViewController<UIWebViewDelegate,JSObjcDelegate> @property (nonatomic, strong) JSContext *jsContext; @property (strong, nonatomic) UIWebView *webView; @end

ViewController.m中的代碼(代碼過長，方法說明都在註釋裏)

JavaScriptCore中web頁面調用原生應用的方法能夠用Delegate或Block兩種方法，此文以按Delegate講解。

設置webView

self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)]; self.webView.delegate = self; //從本地加載html文件 NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSURL* url = [NSURL fileURLWithPath:path]; NSURLRequest* request = [NSURLRequest requestWithURL:url] ; [self.webView loadRequest:request]; [self.view addSubview:self.webView];

JavaScript的tianbai是一個對象，充當原生應用和web頁面之間的一個橋樑。用來調用方法

webview加載完成調用代理

- (void)webViewDidFinishLoad:(UIWebView *)webView { // 設置javaScriptContext上下文 self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //將tianbai對象指向自身 self.jsContext[@"tianbai"] = self; self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue; NSLog(@"異常信息：%@", exceptionValue); }; }

將對象指向自身後，若是調用 tianbai.call() 會響應下面的方法，OC方法中調用js中的Callback方法，並傳值

- (void)call{ NSLog(@"call"); // 以後在回調JavaScript的方法Callback把內容傳出去 JSValue *Callback = self.jsContext[@"Callback"]; //傳值給web端 [Callback callWithArguments:@[@"喚起本地OC回調完成"]]; }

將對象指向自身後，若是調用 tianbai.getCall(callInfo) 會響應下面的方法，OC方法中僅調用JavaScript中的alerCallback方法

- (void)getCall:(NSString *)callString{ NSLog(@"Get:%@", callString); // 成功回調JavaScript的方法Callback JSValue *Callback = self.jsContext[@"alerCallback"]; [Callback callWithArguments:nil]; }

將對象指向自身後，還能夠向html注入js

- (void)alert{ // 直接添加提示框 NSString *str = @"alert('OC添加JS提示成功')"; [self.jsContext evaluateScript:str]; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。