[Swift] Using javascript alert, confirm, prompt dialog in WKWebview

Hello, today, i will explain how to webView setting for using javascript in ios webview

looking at many previous postings, UIWebView was used by many developers

but now, since the advent of WKWebView, WKWebView is most used for webview in ios swift

UIWebView has many source ,so it is may think convenient to develope

but WKWebView's speed for rendering is more higher than UIWebView, twice

and CPU utilization is more effective 

In many cases, WKWebView is more effective

If you load webview only basic way without any other setting, cannot use javascript

therefore, we need to some settings

let's setting together

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

Set as above

The imported class roles are as follows

// WKUIDelegate : Catching event in JavaScripts, plugin, content and give web's basic UI

// WKNavigationDelegate : Protocol, Catching trigger event in start loading, finsh error and user can define trigger event method

FYI, im not explain how to use webview, only explain how to set up webview that can use javascript in wkwebview

If you cannot use webview, recommend read other posting that inform how to use webview

In your wkwebview instace, code as follow

	let myUrl = URL(string: url)

        let myRequest = URLRequest(url: myUrl!)

        webView.load(myRequest)

        webView.uiDelegate = self

        webView.navigationDelegate = self

and add the following function

  func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
            let alertController = UIAlertController(title: "", message: message, preferredStyle: .alert)
            
            
            alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: {(action) in
                completionHandler()
            }))
            
            self.present(alertController, animated: true, completion: nil)
        }
        
    
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
            let alertController = UIAlertController(title: "", message: message, preferredStyle: .alert)
            
            
            alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
                completionHandler(true)
            }))
        
            
            alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
                completionHandler(false)
            }))
            
            self.present(alertController, animated: true, completion: nil)
        }
    
    
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
            let alertController = UIAlertController(title: "", message: prompt, preferredStyle: .alert)
            
            alertController.addTextField { (textField) in
                textField.text = defaultText
            }
            
            
            alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
                if let text = alertController.textFields?.first?.text {
                    completionHandler(text)
                } else {
                    completionHandler(defaultText)
                }
            }))

            
            alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
                completionHandler(nil)
            }))

            self.present(alertController, animated: true, completion: nil)
        }
    

the code is very long, but it is simple because the three functions are similar

Through the above functions, we can use alert, confirm and prompt in webView

Look closely function's parameter, The first is written 'runJavaScriptAlertPanelWithMessage'

second is 'runJavaScriptConfirmPanelWithMessage' and final is 'runJavaScriptTextInputPanelWithPromt'

the first is setting for using alert dialog and second is confirm dialog and final is prompt dialog

Through these function, we can user javascript's 'alert', 'confirm' and 'prompt'

Try it, you can see it succeed