在开发 iOS 原生应用时，我们常常需要使用 WKWebView 来加载 Web 页面。但是，在使用 WKWebView 时，有可能会遇到一个问题：JavaScript 中的 alert() 函数无法弹出提示框。
问题描述
当我们在 JavaScript 中调用 alert('Hello, world!') 函数时，理论上应该会弹出一个带有 "Hello, world!" 文字的提示框。但是，在 WKWebView 中，这个提示框并不会显示出来。
问题原因
WKWebView 的 JavaScript 环境和原生应用的 JavaScript 环境是相互独立的。当我们在 JS 中调用 alert() 函数时，实际上是要让原生应用弹出对话框。但是，由于 WKWebView 和原生应用是两个不同的进程，所以无法直接通信。因此，WKWebView 中的 alert() 函数调用就无法触发原生应用中的对话框。
解决方案
为了解决这个问题，我们需要为 WKWebView 注入一些 JavaScript 代码，使得它可以将 alert() 函数的调用请求发送给原生应用，并在原生应用中显示对话框。
以下是针对 WKWebView 中 alert() 函数无法弹出提示框的解决方案：
步骤一：实现 WKScriptMessageHandler 协议
首先，我们需要在原生应用中实现 WKScriptMessageHandler 协议。这个协议定义了一些方法，可以让我们接收来自 WKWebView 的 JavaScript 消息。
----- --------------- ----------------- ---------------------- -
-------- ---- ------------- -
-------------------
-- -- ---------
--- ------- - ---------------- ------------
------------------------
-- -------
--- ----------------- - -------------------------------------------
--------------------------- ----- -------- -- ------ ------- ---
-
-- -- ---------------------- ------
---- ----------------------- ---------------------- ------------------------ ---------- -------- ---------------- -
-- ------------ -- -------- --- ---- - ------------ --- -------- ---- -
--- ----- - ------------- --- ------ -- --
--- ------- - --------------- --- ------ -- --
-- -------
--- --------------- - ------------------------ ------ -------- -------- --------------- -------
--- -------- - -------------------- ----- ------ --------- -------- ----
-----------------------------------
------------------------ --------- ----- ----------- ----
-
-
-上述代码中，我们在 viewDidLoad() 方法中创建了一个 WKWebView，并注册了一个名为 "alert" 的消息处理器。当 WKWebView 中调用 window.webkit.messageHandlers.alert.postMessage({title: 'Hello', message: 'World!'}) 时，就会触发 didReceive() 方法。在 didReceive() 方法中，我们可以将 title 和 message 作为参数，创建一个原生的 UIAlertController，并显示出来。
步骤二：为 WKWebView 注入 JavaScript 代码
接下来，我们需要为 WKWebView 注入一些 JavaScript 代码，让它可以将 alert() 函数的调用请求发送给原生应用。具体来说，我们可以使用 window.webkit.messageHandlers.alert.postMessage() 将消息发送到原生应用中。
以下是注入 JavaScript 代码的示例：
--- ------ - ---
------------ - ----------------- -
-------------------------------------------------
------ ---
-------- -------
---
--
---
--- ------ - -------------------- ------- -------------- ----------------- ----------------- ------
-----------------------------------------------------------------上述代码中，我们定义了一个名为 alert() 的 JavaScript 函数，并将它重写为向原生应用发送消息
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27612