iOS Mac Swift

[iOS] WKWebViewでアプリからHTMLのJSONをCallする

AndroidとiOSでアプリを作成する必要があって、ちょっと複雑な画面を実装する時にそこだけHTMLで作成できると良いときがあります。 (見た目部分はCSSが得意なデザインチームにお願いもできるし) iOSでHTMLを表示してデータを渡す方法が進化していたので、まとめておきます。 ## 方法 WKWebViewを使って、JavaScriptをCallして値(JSON)をHTML側に渡します。 JavaScriptはこんな感じで情報を受け取る関数を用意しておきます。 ```javascript `gutter:true; function test(val) { const jsonObj = JSON.parse(val); var h1 = document.getElementById("title"); h1.textContent = jsonObj.title; webkit.messageHandlers.callbackHandler.postMessage(val); } ``` Swiftからはtest関数をこんな感じでCallします。 ```c `gutter:true; extension ViewController : WKNavigationDelegate { func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { // Javascriptに渡す値 let param: String = "{\"title\": \"Hello World!\"}" // Javascript側で実行する関数 let execJsFunc: String = "test(JSON.stringify(\(param)));" webView.evaluateJavaScript(execJsFunc, completionHandler: { (object, error) -> Void in // jsの関数実行結果 // js側で戻り値を返すこともできる }) } } ``` 注意するのは、JavaScriptをCallするのはHTMLの読み込みが終わってから行うということです。 サンプルコードではdidFinishのデリゲートをトリガーに実行しています。 ### その他 以前はURLの読み込みとか、リンクをDelegateで受けて処理をねじ込む必要があったと記憶していますがJavaScriptの関数を直接Callできるようになっていて簡単になりました。 Androidは昔からJavaScriptを呼び出せるようになっていたので、足並みが揃いました。 (iOSはWKWebViewになったあたりでできるようになったのかな？) ### 参考URL * [Qiitaの投稿](https://qiita.com/takutoki/items/166204807ee48cd7dd59) * [今回のサンプルコード](https://github.com/k28/ios-sample/tree/master/WKWebViewSample)