2024/12/11

【Kotlin/Android】WebViewでJavaScriptのポップアップが表示されない原因と対応方法

この記事からわかること

Kotlin/Android StudioでWebViewの使い方
JavaScriptのwindow.alert()/window.confirm()が表示されない原因

index

[open]

WebViewでJavaScriptのポップアップが表示されない原因
ポップアップを表示させる方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Koala
Kotlin：1.9.0

WebViewでJavaScriptのポップアップが表示されない原因

AndroidアプリからWebViewでWebページを表示している際にJavaScriptで実装していたalertとconfirmが表示されない事象が発生しました。調べてみるとWKWebViewではデフォルトではポップアップ表示に対応していないようです。

JavaScript
window.alert('Hello, World!')

JavaScript
window.confirm('Hello, World!')

⇧上記でポップアップ出るのでWebViewで開いて確認してみてください。

ポップアップを表示させる方法

WebViewでポップアップを表示させるにはWebChromeClientのonJsAlertとonJsConfirmメソッドを活用します。

この2つのメソッドではJavaScriptで実装したalertとconfirmをネイティブ側のアラートへ繋ぎこむことができるようになります。confirmで押下した後の処理もJsResultのconfirmまたはcancelメソッドを呼び出すことでJavaScript側の押下後の実装を問題なく動作させることが可能になっています。

private class MyWebChromeClient(private var context: Context) : WebChromeClient() {
        /// JavaScriptのwindow.alert()を処理
        override fun onJsAlert(
            view: WebView,
            url: String,
            message: String,
            result: JsResult,
        ): Boolean {
            AlertDialog.Builder(context)
                .setTitle("Alert")
                .setMessage(message)
                .setPositiveButton(
                    android.R.string.ok
                ) { dialog: DialogInterface?, which: Int -> result.confirm() }
                .setCancelable(false)
                .show()
            return true
        }
        /// JavaScriptのwindow.confirm()を処理
        override fun onJsConfirm(
            view: WebView,
            url: String,
            message: String,
            result: JsResult,
        ): Boolean {
            AlertDialog.Builder(context)
                .setTitle("Confirm")
                .setMessage(message)
                .setPositiveButton(
                    android.R.string.ok
                ) { dialog: DialogInterface?, which: Int -> result.confirm() }
                .setNegativeButton(
                    android.R.string.cancel
                ) { dialog: DialogInterface?, which: Int -> result.cancel() }
                .setCancelable(false)
                .show()
            return true
        }
}

JavaScriptを有効にするのとWebChromeClientのセットを忘れないように。

// JavaScriptを有効にする
binding.webView.settings.javaScriptEnabled = true
// ChromeClientをセット
binding.webView.webChromeClient = MyWebChromeClient(this)
binding.webView.loadUrl("https://appdev-room.com/android-uikit-wkwebview-js-alert")