WebView で Javascript と Objective-C のコードを相互に呼び出す方法


今日はあんまり天気よくないですね、、、
憂鬱です。

さて、今日はiPhoneのWebViewでJSとObjective-Cで連携する方法について紹介したいと思います。
いわゆるPhoneGapプラグインではなく、WebViewであれば使える方法です。

1.Objective-CからJSのメソッドを呼び出す方法

まず、ネイティブ側からJSを呼び出す方法です。
これは結構簡単で、

[webView stringByEvaluatingJavaScriptFromString:@"JS Code"];

という風にすればOKです。
「JS Code」の部分に書いたJavascriptがwebView上で呼び出されます。
ただ、注意点があって、JS Codeの実行は10秒以内に終わる必要があります。
10秒以上かかる場合は強制的に実行がとめられます。まぁ10秒もかかるスクリプトはその時点でどうなんだって話もありますが、バッチ処理など重い処理を実行する場合は注意が必要です。
また、メモリは10MBまでしか利用できないという制限もあるので、やはり重い処理を実行するには注意が必要です。

なお、返り値はを受け取ることもでき、実行に失敗したらnilが返ってきます。

2.JSからObjective-Cのメソッドを実行する方法

これはちょっと複雑です。
直接これを実現する方法はありません。
WebViewのデリゲートで「shouldStartLoadWithRequest」というものがあって、遷移のタイミングで遷移先のURLを取得できるのでそれを利用します。

具体的には、
1.window.locationを利用して、objective-cで実行したいメソッドなどの情報をURLに入れます。
2.URLが変わるタイミングで「shouldStartLoadWithRequest」が実行されるので、URLを取り出して中身を解析することでObjective-Cのメソッドを実行します。
という感じになります。

簡単なサンプルコードを載せておくと

// Javascript のコード
window.location = "webview://doSample";

// Objective-Cのコード
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
   NSURL *URL = [request URL];
   if ([[URL scheme] isEqualToString:@"webview"]) {
       [self [URL host]];
      return NO;
   }
   return YES;
}

- (void)doSample {
  // Sample Method
}

となります。
例では、doSampleというObjective-Cのメソッドを実行する感じですね。
要はURLに入れた文字列をObjective-C側で解析すればいいので、上記のようにschemeから判断してもいいですし、他のルールで判断しても構いません。

これで、WebView使ったアプリで簡単にネイティブとJS側で連携できますね!

今日はこの辺で
Let’s enjoy HTML5 Life!!

Comments

2013.04.14

[...] WebView で Javascript と Objective-C のコードを相互に呼び出す方法 ≫ 【スマホ×… [...]

Leave a Comment

*

Categories

Recent News

HTML5/CSS3/Javascriptのニュースまとめ[8/19〜8/25]

先週のニュース・ブログ記事を紹介していきます! 先週はちょっと少なめで...

PhoneGap3.0がリリースされましたね!

PhoneGap3.0がリリースされましたね! PhoneGap Da...

HTML5/CSS3/Javascriptのニュースまとめ[6/17〜6/23]

今日は先週のニュース・ブログ記事のまとめです。 1.HTML5 歴史的...

HTML5/CSS3/Javascriptのニュースまとめ[6/10〜6/16]

今日は先週のニュース・ブログ記事のまとめです。 個人的に気になったもの...

AndroidのWebViewでUserAgentを独自に設定する方法

今日はAndroidのWebViewでユーザーエージェントを独自のもの...