개발

Swift iOS WKWebView : JavaScript -> Swift 함수 호출하기 Use WKWebViewConfiguration (코드 부분)

소소ing 2020. 9. 22. 18:26
반응형

iOS WKWebView를 이용하여 javaScript에서 swift 함수를 호출해 봅시다.

 

해당 글에서 코드 부분은 파란색으로 표기 됩니다.

해당 글에서 중요 부분은 붉은색으로 표기 됩니다.

 

1. WKWebView가 나오기전 UIWebView에서는 JavaScript 에서 앱 내 함수 호출 시 document.location을 이용한 URL 파싱으로 작업을 하였습니다. 

Ex)  document.location = "sosostudy:::" + "<호출할 함수 이름>:" + param1 + ":" + param2;

        - sosostudy : http와 같은 프로토콜 구분 용도 

      

2. WKWebView에서는 WebKit 모듈을 이용하므로  WKWebViewConfiguration을 이용하여 보다 편리하게 호출이 가능합니다. 

2-1. WKWebViewConfiguration 이란?

Apple 공식 도큐먼트 보러가기

위 주소를 통해 확인해 보면, WKWebViewConfiguration 클래스를 사용하면 웹 페이지의 렌더링 속도, 미디어 재생 처리 방법, 사용자가 선택할 수있는 항목의 세분성 및 기타 여러 옵션을 결정할 수 있다고 명시되어 있습니다.

 

2-2. JavaScript가 앱 내 함수를 식별하기 위해서 WKWebViewConfiguration의 WKUserContentController를 사용하게 됩니다. 

2-3. WKUserContentController 이란?

Apple 공식 도큐먼트 보러가기

위 주소를 통해 확인해 보면, WKUserContentController 객체는 JavaScript가 메시지를 게시하고 웹 스크립트에 사용자 스크립트를 삽입하는 방법을 제공한다고 명시되어 있습니다.

 

3. "Swift iOS WKWebView : 기본 연동 (코드 부분)" 코드를 작성 한 후 붉은 부분을 추가 합니다.

[MainViewController.swift 파일 안]

// * WKWebView를 사용하기 위해서는 WebKit 모듈을 import 시켜야 합니다.

import WebKit

 

// * WKUserContentController에 핸들러를 추가하게 되면 JavaScript에서 등록한 핸들러 호출 시 이벤트를 수신할 

//    WKScriptMessageHandler를 선언하여야 합니다.

class MainViewController: UIViewController, WKScriptMessageHandler {

    // * WKWebView 객체 선언

    private var wkWebView: WKWebView? = nil

   // * WKWebViewConfiguration 객체 선언

   private var config: WKWebViewConfiguration? = nil

 

    override func viewDidLoad() {

        super.viewDidLoad()

        // * WKWebView JS Functions 통신을 위한 WKWebViewConfiguration 구성

        self.config = WKWebViewConfiguration.init()

        self.config?.userContentController = WKUserContentController.init()

        // * WKWebView JS -> iOS 핸들러 추가

       //    - 핸들러 이름 = 실제 호출 할 함수 이름

        self.config?.userContentController.add(self, name: "<호출하고자 하는 함수명1>")

        self.config?.userContentController.add(self, name: "<호출하고자 하는 함수명2>")

 

        // * WKWebView 구성

        //    - 여기서는 self.view 화면 전체를 WKWebView로 구성하였습니다.

       //    - 추가로 설정한 WKWebViewConfiguration를 WKWebView 구성 시에 넣어 줍니다.

        self.wkWebView = WKWebView.init(frame: CGRect.init(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height), configuration: self.config!)

 

        // * WKWebView 화면 비율 맞춤 설정

        self.wkWebView?.autoresizingMask = UIViewAutoresizing(rawValue: UIViewAutoresizing.RawValue(UInt8(UIViewAutoresizing.flexibleWidth.rawValue) | UInt8(UIViewAutoresizing.flexibleHeight.rawValue)))

 

        // * WKWebView 여백 및 배경 부분 색 투명하게 변경

        self.wkWebView?.backgroundColor = UIColor.clear

        self.wkWebView?.isOpaque = false

        self.wkWebView?.loadHTMLString("<body style=\"background-color: transparent\">", baseURL: nil)

   

         // * WKWebView에 로딩할 URL 전달

         //    - 캐시 기본 정책 사용, 타임아웃은 10초로 지정하였습니다.

         let request: URLRequest = URLRequest.init(url: NSURL.init(string: "<URL 입력>")! as URL, cachePolicy: URLRequest.CachePolicy.useProtocolCachePolicy, timeoutInterval: 10)

         self.wkWebView?.load(request)

 

          // * WKWebView 화면에 표시 

          self.view?.addSubview(self.wkWebView!)

    }

 

   // * WKScriptMessageHandler : 등록한 핸들러가 호출될 경우 이벤트를 수신하는 함수

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

        // * message.name == 함수명, message.body == 파라미터 정보

        print("message name == \(message.name)")

        print("message body == \(message.body)")

     

        // * 함수별 로젝 처리 부분

        if(message.name == "<호출하고자 하는 함수명1>")

        {

            // * "<호출하고자 하는 함수명1>" 일때 로직 처리

        }

 

        // * 로그인 회원가입 시 호출 함수 : user_idx 값 저장하기

        else if(message.name == "<호출하고자 하는 함수명2>")

        {

            // * "<호출하고자 하는 함수명2>" 일때 로직 처리

        }

    }

}

반응형