MHG Javascript Bridge概要
4116 ワード
用途
iOSの開発において、私たちはよくこのような要求に出会います.UICWebViewの中の一つのリンクは次のページに入るのではなく、次のUID View Controllerに入るか、ObjCコードに何かをさせます.これは情報類の応用の中でよく見られます.例えば、網易ニュース、騰訊ニュース、及び当社の東方富通中の情報です.
古いiOSバージョンでは、JavascriptでObjCを直接呼び出す方法は提供されていません.ネットワーク要求は、変換locationなどによってのみ開始され、
しかし、このようにするのは優雅ではなく、すべてのことはURL要求の上にあります.MHG JavascriptBridgeはURL要求などをパッケージ化して、JavascriptとObjCコードを方法呼び出し自体に重視させます.
Githubアドレス:https://github.com/hikui/MHGJavascriptBridge
使い方
MHG JavascriptBridgeは3つのファイルからなり、
Objective C設定
まず、bridgeを初期化する必要があります.これは通常UID View Controllerで行われます.ここでは、UID View Controllerにおいてbridgeを初期化すると仮定する.初期化には、bridgeの
これでObjective C部分の設定が完了しました.ここで注意したいのは、blockが呼び出された時に、Javascriptの一部コードがObjective Cコードを調整した時に伝わったパラメータです.
Javascript設定
Javascript部分の設定は比較的簡単で、最も基本的な設定はUICbViewのHTMLが
が すれば、JavascriptとObjective Cはお いに しできます.コードは の りです
Objective CはJavascriptコードを び します.
は と している:
JavascriptがObjective Cを び した 、すべての び しは で、 に び しを できません. JavascriptがObjective Cを び すと、 えられたパラメータはURL に されます.
iOSの開発において、私たちはよくこのような要求に出会います.UICWebViewの中の一つのリンクは次のページに入るのではなく、次のUID View Controllerに入るか、ObjCコードに何かをさせます.これは情報類の応用の中でよく見られます.例えば、網易ニュース、騰訊ニュース、及び当社の東方富通中の情報です.
古いiOSバージョンでは、JavascriptでObjCを直接呼び出す方法は提供されていません.ネットワーク要求は、変換locationなどによってのみ開始され、
UIWebViewDelegate
の- (BOOL)webView:shouldStartLoadWithRequest:navigationType:
に感知され、ObjCの処理が行われる.しかし、このようにするのは優雅ではなく、すべてのことはURL要求の上にあります.MHG JavascriptBridgeはURL要求などをパッケージ化して、JavascriptとObjCコードを方法呼び出し自体に重視させます.
Githubアドレス:https://github.com/hikui/MHGJavascriptBridge
使い方
MHG JavascriptBridgeは3つのファイルからなり、
MHGJavascriptBridge.h
、MHGJavascriptBridge.m
、MHGJavascriptBridge.js
、MHGJavascriptBridge.js
.この3つのファイルをXcodeプロジェクトに追加します.なお、webView
は、リソースファイルに参加しなければならない(「Bulting phases」->「Copy bundle resource」に表示される).Xcodeのデフォルトは、jsファイルをCopile Sourcesに追加することになり、これは誤りである.Objective C設定
まず、bridgeを初期化する必要があります.これは通常UID View Controllerで行われます.ここでは、UID View Controllerにおいてbridgeを初期化すると仮定する.初期化には、bridgeの
UIWebViewDelegate
属性を設定する必要があります.@interface MHGWebViewController ()
@property (nonatomic, strong) MHGJavascriptBridge *bridge;
@property (nonatomic, strong) UIWebView *webView;
@end
...
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
_bridge = [[MHGJavascriptBridge alloc]init];
_bridge.webView = self.webView;
}
return self;
}
MHG JavascriptBridgeでは、Javascriptによって呼び出されるすべてのObjective C方法がblockとして表示されます.まず、ブロックを定義して、ブロックごとに名前をつける必要があります.- (void)viewDidLoad
{
[super viewDidLoad];
[self.bridge setBlockName:@"button1OnClick" block:^(NSDictionary *dict) {
// do stuff
NSLog(@"button1 on click with params:%@", dict);
}];
[self.bridge setBlockName:@"beginSomeTasks" block:^(NSDictionary *dict) {
// do stuff
NSLog(@"begin some tasks with params:%@", dict);
}];
...
}
MHG JavascriptBridgeの原理は特定のURLを構築し、- (BOOL)webView:shouldStartLoadWithRequest:navigationType:
のinterceptRequest:
でこのURLをブロックすることである.ですから、このdelegate方法では、ブロックを入れる必要があります.- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
BOOL intercepted = [self.bridge interceptRequest:request]; //
// Do other things ...
return YES;
}
BOOL
方法は、ブロックが成功すればYES
に戻る.これでObjective C部分の設定が完了しました.ここで注意したいのは、blockが呼び出された時に、Javascriptの一部コードがObjective Cコードを調整した時に伝わったパラメータです.
Javascript設定
Javascript部分の設定は比較的簡単で、最も基本的な設定はUICbViewのHTMLが
dict
を導入したことを保証することである.
Javascript び しObjective Cコードが すれば、JavascriptとObjective Cはお いに しできます.コードは の りです
var button1ClickEventHandler = function (){
// Do stuff ...
MHGJavascriptBridge.callNativeBlock('button1OnClick',{'url':imageURL});
};
この 、button 1をクリックすると、Objective Cのコードが されます.MHGJavascriptBridge.js
には2つのパラメータがあり、 1のパラメータはObjective Cに されたblock であり、 2のパラメータはblockに されたMHGJavascriptBridge.callNativeBlock
の である. つ のパラメータは でなければなりません.あるいは も えません.Objective CはJavascriptコードを び します.
は と している:
...
[self.bridge callJavascriptFunction:@"setImageWithURL" withParams:@[fileURL.absoluteString]];
...
のパラメータはJavascript です.もしあなたがHTMLでdict
またはfunction xxx(){}
を したら、 び されます. つ のパラメータは で、Javascript が うパラメータ を えます.