iOS Mac Swift

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

AndroidとiOSでアプリを作成する必要があって、ちょっと複雑な画面を実装する時にそこだけHTMLで作成できると良いときがあります。
(見た目部分はCSSが得意なデザインチームにお願いもできるし)
iOSでHTMLを表示してデータを渡す方法が進化していたので、まとめておきます。

方法

WKWebViewを使って、JavaScriptをCallして値(JSON)をHTML側に渡します。

JavaScriptはこんな感じで情報を受け取る関数を用意しておきます。

?
1
2
3
4
5
6
7
8
9
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します。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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

0 件のコメント :

コメントを投稿