やりたいこと
- iOSアプリ内の値をiOSアプリで表示しているWebViewに反映したい
- 渡す値が複数ある
JavaScriptを実行する方法
既存の記事もたくさんありますが、以下のメソッドで実行できます
webView.evaluateJavaScript("実行したいscript")
WKWebViewから値を渡すには
postMessageを使います
webView?.evaluateJavaScript(
"window.postMessage({'name':'message'},'*');"
)
これに値を増やせば複数送れるのでは？と思っていましたが、ダメでした
webView?.evaluateJavaScript(
"window.postMessage({'name':'name1'}, {'key':'value'}, '*');"
)
それもそのはず、第２引数はmessageじゃなくてtargetだったため。
postMessageの引数の解説は以下の通り
-
message
他のウィンドウに送られるデータ。データは構造化複製アルゴリズムに従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを宛先に安全に渡すことができます。 -
targetOrigin
イベントを配信するこのウィンドウのオリジンを指定します。リテラル文字列 "*" (優先順位なし) か URI のどちらかで指定します。イベントが配信される予定時刻に、このウィンドウの文書のスキーム、ホスト名、ポートが targetOrigin で指定されたものと一致しない場合、イベントは配信されません。この仕組みにより、メッセージが送信される場所を制御できます。例えば、 postMessage() をパスワードを送信するために使用する場合、悪意のある第三者によるパスワードの傍受を防ぐために、この引数がパスワードを含むメッセージの受信予定者と同じオリジンの URI であることが絶対に重要でしょう。 他のウィンドウの文書がどこにあるものか知っている場合は、 * ではなく、常に特定の targetOrigin を指定してください。特定のターゲットを指定しないと、悪意のあるサイトに送信したデータが開示されてしまいます。 -
transfer 省略可
メッセージと一緒に移譲される移譲可能オブジェクトのシーケンスです。これらのオブジェクトの所有権は送信先に移譲され、送信元では使えなくなります。
引用元： https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage
やったこと
上記を受けて修正したのがこちら
webView?.evaluateJavaScript(
"window.postMessage({'name':'name1', 'key':'value'}, '*');
")
大したことではないですが、これで複数の値が送れるようになりました。
アプリで選択した値を送るとか、使える場面があるかと思います。