UIWebView js oc相互呼び出しの3つの方法

変換元:http://www.jianshu.com/p/dbddfc0eaa26
JS oc相互呼び出し方法:

 1.    url  
 2.  js    
 3.  js     

まず、UIWebViewオブジェクトを作成し、ローカルhtmlファイルをロードします.

//    html  
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];
//NSString *htmlPath1 = [[NSBundle mainBundle]  pathForResource:@"jsbridge" ofType:@"html"];
//NSString *htmlPath2 = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[_webView loadHTMLString:htmlString baseURL:nil];
_webView.delegate = self;
[self.view addSubview:_webView];

UIWebViewDelegateの実装

 //       
 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
//      
- (void)webViewDidStartLoad:(UIWebView *)webView
//      
- (void)webViewDidFinishLoad:(UIWebView *)webView
//      
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error

1.定義url呼び出しによる
js呼び出しoc:
jsメソッドを定義し、Webページのボタンをクリックしてjsメソッドをトリガし、urlにリダイレクトし、UIWebViewdのエージェントメソッドをトリガします.

スクリーンショット2016-05-03午後3.14.25.png
定義したschemeを判断しurlから渡された値を取得する

スクリーンショット2016-05-03午後3.19.05.png
oc呼び出しjs:

NSString *textJS = @"showAlert('   JS alert   message      ')";
[_webView stringByEvaluatingJavaScriptFromString:textJS];

2.jsによるダイレクトコール
2つ目と3つ目の方法を使用する場合はJavaScriptCoreを追加する必要があります.framework、プロジェクトがios 7をサポートする必要がある場合.0以前の互換性はiOS 7からアップルがJavaScriptCoreを発表した.frameworkはJSとOCのインタラクションをより便利にしました.まずJavaScriptCoreをインポートする.framework

20150725170931474.png
次にヘッダファイルをインポート

#import 

ロードしたhtmlファイルを交換してください

スクリーンショット2016-05-03午後3.34.10.png
Webでのjsメソッド

スクリーンショット2016-05-03午後3.37.36.png
Webのボタンをクリックし、Jscontextでshareメソッドを直接呼び出し、JsValueから値をとる

スクリーンショット2016-05-03午後3.35.26.png
oc呼び出しjs:

 JSContext *context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
 //oc    js
 NSString *textJS = @"showAlert('   JS alert   message')";
[context evaluateScript:textJS];

3.jsでのオブジェクト呼び出しを利用する
ここは少し複雑です.

JSExport

JSFportプロトコルを追加したプロトコルは、規定された方法、変数などがjsに開放され、jsで呼び出すことができます.
まずhtmlでオブジェクトを作成し、メソッドを定義します.

スクリーンショット2016-05-03午後3.44.27.png

     
 TestJSobject.TestNOParameter();
         
 TestJSobject.TestOneParameter(TestJSobject.name);
                    
TestJSobject.TestTwoParameterSecondParameter(TestJSobject.name,TestJSobject.age);

ocクラスの作成、プロトコルの追加

スクリーンショット2016-05-03午後3.47.46.png
実装プロトコルメソッド

スクリーンショット2016-05-03午後3.48.01.png
特に注意:
jsのパラメータが2つを超える場合、ocのメソッド名は別々にする必要があります.js TestJSobject.TestTwoParameterSecondParameter(TestJSobject.name,TestJSobject.age);oc -(void)TestTwoParameter:(NSString *)message1 SecondParameter:(NSString *)message2

  //js    ，    
JSContext *context = [webView    valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
TestJSobject *test = [TestJSobject new];
 context[@"TestJSobject"] = test;

oc呼び出しjs:

 //               js    
 NSString *jsStr1=@"TestJSobject.TestNOParameter()";
[context evaluateScript:jsStr1];

Webのボタンをクリックするとocのプロトコルメソッドがトリガーされます

スクリーンショット2016-05-03午後4.05.06.png

スクリーンショット2016-05-03午後4.05.10.png
まとめ:以上のいくつかの方法によって、個人的に第3の方法がocとよりよく関連していると感じ、viewControllerの中で膨大すぎることを回避し、方法が多い場合.
文/ランニングの李磊(簡書作者)
テキストリンク:http://www.jianshu.com/p/dbddfc0eaa26
著作権は作者の所有で、転載は作者に連絡して授権を得て、そして“簡書の作者”を表示してください.