[IOS]스위프트 웹뷰 자바스크립트 경고창 설정

안녕하세요, 오늘은 ios의 웹뷰에서 자바스크립트를 사용하기 위해 어떤 설정을 해야하는지 설명드리겠습니다.

 

구글링이나 다른 포털사이트를 통해 많은 포스팅을 보면 여전히 UIWebView에 관한 포스팅들이 많이 있을 것입니다.

 

WKWebView설정을 하다가 어렵고 잘 안되다보면, UIWebView 소스가 많으니깐 UIWebView로 웹뷰를 

 

만들어볼까 생각도 할 수 있는데요. 

 

성능면에서 WKWebView가 훨씬 우수하니 WKWebView를 사용하는것이 훨씬 좋습니다.

 

웹페이지를 불러오는 렌더링 속도가 두배정도 더 빠르며 CPU 효율도 훨씬 효과적입니다.

 

WKWebView에서 별도의 설정을 하지 않고 그대로 사용하면 자바스크립트의 경고창은 사용되지 않습니다. 

 

비활성화 되어 있는거죠. 

 

커스터마이징을 통해 활성화를 시켜줘야 합니다. 

 

자바스크립트의 경고창인 alert, confirm, prompt에 대해서 말이죠.

 

 

 

셋팅을 해보겠습니다. 

 

밑에처럼 코드를 수정해주세요.

 

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

 

우리가 import한 클래스들의 역할은 아래와 같습니다.

 

// WKUIDelegate : 자바스크립트 이벤트를 캐치하는 플러그를 제공하고 경고창 UI를 제공합니다.

 

// WKNavigationDelegate : 프로토콜이며(자바의 인터페이스와 비슷한 역할),  start loading, finsh 트리거 이벤트를 잡아내며  사용자가 트리거 이벤트를 재정의 할 수 있습니다.

 

 

 

참고로 웹뷰을 불러오는 것에 대해서는 설명하지 않습니다. 웹뷰를 불러오신 경우 자바스크립트 설정부분만 

 

이번 포스팅에서 설명할 것이니, 웹뷰를 불러오지 못하시는 분들은 우선 웹뷰 불러오는 포스팅을 참고하고 

 

이글을 보는것을 추천드립니다.

 

 

 

 

wkwebview 객체에서 다음과 같이 설정해주세요.

 

	let myUrl = URL(string: url)

        let myRequest = URLRequest(url: myUrl!)

        webView.load(myRequest)

        webView.uiDelegate = self

        webView.navigationDelegate = self

 

 

 

 

그리고 밑에와 같은 코드를 추가시켜주세요.

 

  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

코드가 굉장히 길지만 메소드 명을 자세히 살펴보면 그 기능을 알수 있습니다.

 

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

첫번째 메소드의 파라미터는 'runJavaScriptAlertPanelWithMessage'라고 쓰여 있는데

 

네, 맞습니다. 이는 alert경고창에 대한 커스트마이징을 하는 메서드 입니다.

 

 

second is '' and final is ''

두번째 메소드의 파라미터는 'runJavaScriptConfirmPanelWithMessage'라고 쓰여 있는데

 

confirm 경고창에 대해 재정의 하는 메서드이며

 

마지막 메서드의 'runJavaScriptTextInputPanelWithPromt'을 보면 prompt에 관한 메서드라는걸 알수 있겠죠.

 

자바스크립트에 관한 설정을 끝이 났습니다. 

 

 

 

 

 

링크 있음  줌 속성 설명한 포스팅이랑 링크 걸기

 

 

 

 

다음 포스팅에서는 웹뷰에서 확대 축소 속성을 제거하는 방법에 대해 알아볼텐데요.

 

관심이 있으신 분들은 밑의 링크를 참고해주세요.