Swift WebView Alert 無法顯示？2025 最新解決方案與最佳實踐
WebView Alert 為何無法顯示？
在 iOS 中使用 WebView 時，JavaScript 的 alert 功能常常無法正常顯示。當你希望在 WebView 中彈出警告框時，需要將其轉化為原生的 iOS alert 來顯示。這篇文章將介紹如何在 Swift 中正確設置 WKWebView 以使 JavaScript alert 功能正常運作。
1. 設置 WKWebView
首先，我們需要初始化一個 WKWebView。以下是如何設置 WebView 的步驟：
“`swift
import UIKit
import WebKit
class HomeViewController: UIViewController, WKUIDelegate {
let webView = WKWebView()
override func viewDidLoad() {
super.viewDidLoad()
setupWebView()
loadWebPage()
}
private func setupWebView() {
webView.frame = self.view.bounds
webView.uiDelegate = self
self.view.addSubview(webView)
}
private func loadWebPage() {
if let url = URL(string: “https://www.google.com/”) {
webView.load(URLRequest(url: url))
}
}
}
“`
2. 添加 Delegate
為了處理 JavaScript alert，我們需要遵循 `WKUIDelegate` 協定。這樣可以讓我們攔截 WebView 中的 alert 事件，並轉化為 iOS 的 AlertController。
“`swift
class HomeViewController: UIViewController, WKUIDelegate {
// 之前的代碼…
// 這裡可以添加你的 delegate 方法
}
“`
3. 監聽 WKWebView 的 JavaScript 警告
接下來，我們需要實現 `WKUIDelegate` 中的幾個方法來處理 JavaScript 的 alert、confirm 和 prompt。
“`swift
// 監聽 JavaScript Alert
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
let alertController = UIAlertController(title: nil, message: message, preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: “Ok”, style: .default, handler: { (action) in
completionHandler()
}))
self.present(alertController, animated: true, completion: nil)
}
// 監聽 JavaScript Confirm
func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
let alertController = UIAlertController(title: nil, message: message, preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: “Ok”, style: .default, handler: { (action) in
completionHandler(true)
}))
alertController.addAction(UIAlertAction(title: “Cancel”, style: .cancel, handler: { (action) in
completionHandler(false)
}))
self.present(alertController, animated: true, completion: nil)
}
// 監聽 JavaScript Prompt
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
let alertController = UIAlertController(title: nil, message: prompt, preferredStyle: .alert)
alertController.addTextField { (textField) in
textField.text = defaultText
}
alertController.addAction(UIAlertAction(title: “Ok”, style: .default, handler: { (action) in
completionHandler(alertController.textFields?.first?.text)
}))
alertController.addAction(UIAlertAction(title: “Cancel”, style: .cancel, handler: { (action) in
completionHandler(nil)
}))
self.present(alertController, animated: true, completion: nil)
}
“`
錯誤排除
如果在執行上述代碼時遇到問題，請檢查以下幾點：
1. 確保已正確設置 WKWebView 的 delegate。
2. 確認 JavaScript 是否在你的 WebView 中啟用。
3. 檢查 JavaScript 的 alert 語法是否正確。
延伸應用
除了基本的 alert 功能，還可以根據需要擴展其他功能，例如自定義樣式的 alert，或結合其他 iOS UI 元素來提升用戶體驗。
結語
通過以上步驟，你應該能夠在 Swift 的 WKWebView 中成功彈出 JavaScript alert，並轉化為原生的 iOS alert 進行顯示。這不僅提升了用戶體驗，也使得應用更加專業。
Q&A（常見問題解答）
**Q1: 為什麼 WebView 中的 alert 不能正常顯示？**
A1: 因為 WKWebView 不直接支持 JavaScript 的 alert，因此需要將其轉化為 iOS 的原生 alert。
**Q2: 如何在 WKWebView 中啟用 JavaScript？**
A2: 在初始化 WKWebView 時，確保將配置設置為支持 JavaScript。
**Q3: 我可以自定義 alert 的樣式嗎？**
A3: 是的，你可以使用 UIAlertController 自定義 alert 的樣式和按鈕。
—