WKWebView Component 1(Alert Event, go Back, go Forward)

목적

웹 페이지 내 Javascript의 alert event를 iOS 기기에서도 동일하게 나타내기 위함

 

PC alert

 

Mobile(iOS) alert

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
   
    var webView: WKWebView!
    
    override func loadView() {
        
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        webView.allowsBackForwardNavigationGestures = true
               
        self.view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        webViewSetting()
    }
      
    private func webViewSetting() {
        webView.backgroundColor = UIColor(red: 34 / 255, green: 34 / 255, blue: 34 / 255, alpha: 1.0)
        NSLayoutConstraint.activate([
            webView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        
        if let url = URL(string: "URL") {
            webView.load(URLRequest(url: url))
        }
        
    }
            
}

extension ViewController: WKUIDelegate {
    
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        if message.contains("tel") {
            let alertController = UIAlertController(title: "Emergency", message: message, preferredStyle: .alert)
            let cancelAction = UIAlertAction(title: "Okay", style: .cancel) {
                _ in completionHandler()
            }
            alertController.addAction(cancelAction)
            DispatchQueue.main.async {
                self.present(alertController, animated: true)
            }
        } else {
            print("message: \(message)")
        }
    }
    
}

---

뒤로가기, 앞으로 가기(다른 페이지로의 이동 기록이 있을 경우)

// 좌우 스와이프시, 이전 페이지 또는 이후 페이지로 이동할 수 있도록 허용(default: false)
webView.allowsBackForwardNavigationGestures = true

// 오버 스크롤 방지 코드(스크롤 팅귐 방지)
// ====== webview scroll bounce control ======
webView.scrollView.alwaysBounceVertical = false
webView.scrollView.bounces = false
// ====== webview scroll bounce control ======