【Swift】WKWebViewでJavaScriptのコールバックを受けつける(WKUserContentControllerの使い方)

【Swift】WKWebViewでJavaScriptのコールバックを受けつける(WKUserContentControllerの使い方)

iOSにて、WKWebView でJavaScriptのコールバックを受けつける必要があったので備忘録。
今回は WKUserContentController を利用した方法を紹介します。
 

WKWebView の使い方

まずは WKWebView の基本的な使い方ですが、こちらを参考にしていただければと思います。
 

WKUserContentController の使い方

WKUserContentControllerJavaScriptからのコールバック受信や、スクリプトをWebビューに挿入する方法を提供します。
下記が導入のサンプルコードです。

1 WKUserContentController の生成

WKUserContentControllerWKWebViewConfigurationに格納する必要があるので、まずはインスタンスを生成します。
 

2 WKUserContentController にコールバックハンドラを登録

WKUserContentControlleradd関数を用いて、JavaScriptから実行したい関数を持つクラスインスタンス(WKScriptMessageHandlerプロトコルに準拠したクラス)を第一引数に設定し、コールバックの判別に利用するためのStringname引数に設定します。
このadd関数は何度も実行できるので、複数のコールバックを処理したい場合はname引数を変更して実行すれば、後述するコールバック関数内で判定することができます。
 

3 WKWebViewConfiguration に生成した WKUserContentController を登録する

生成したWKUserContentControllerインスタンスは、WKWebViewConfigurationuserContentControllerプロパティに格納します。
 

4 WKScriptMessageHandler のデリゲートを記載

上記ViewControllerはデリゲート先としてWKUserContentControllerに渡され登録されているので、WKScriptMessageHandlerプロトコルに準拠させる必要があります。
 

5 JavaScript から呼び出されるコールバックハンドラ関数を記載

WKScriptMessageHandlerプロトコルに準拠させるために、userContentController関数を実装します。この関数を実装する事で、Javascriptからのコールバックを受け付けることができるようになります。

JSからは下記のように、②の箇所のadd関数にてname引数に指定したコールバックを実行します。

コールバックハンドラ内ではmessage.nameプロパティでコールバック名を取得することができるので、サンプルコードのようにswitch文等で判定する事で、処理を分岐させる事ができます。
 

検証Playground

検証Playground Git
 

検証環境

Mac: 10.13.6
XCode: 10.1
Swift: 4.2.1
 

参考ドキュメント

公式 WKWebView ドキュメント
公式 WKWebViewConfiguration ドキュメント
公式 WKUserContentController ドキュメント