WKWebView-JavaScript.md

JS 와 WKWebView 통신

까묵어서 이번엔 정리

JS -> WKWebView

• 동기 (함수 리턴 가능)

  ==함수 리턴 전까지 호출한 JS쪽이 블락되기 때문에, native의 비동기 처리가 필요한 경우 아래 비동기를 이용하자==

  1. native에서 자바스크립트 함수 등록

     let script = WKUserScript(source: "function getNativeData() { return [1,2,3]; };', injectionTime: .atDocumentEnd, forMainFrameOnly: true)
     
     WKContentController.addUserScript(script)
     

     호출

     >> getNativeData()
     [1,2,3]

• 비동기

  ==호출된 함수로 값 리턴 불가==, JS로 값 리턴 필요시 아래 참조

  1. WKWebView에 호출받을 JS함수명 등록

     WKContentController.add(delegate, name: "nativeFunction")

  2. 호출 구현

     해당 자바스크립트 함수가 아닌, WKScriptMessageHandler 구현

     extension FooDelegate: WKScriptMessageHandler {
         func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
           let functionName = message.name
           let body = message.body
           // ...
     }
     

  3. 호출

     /* - 1개의 인자 지정 필수 - postMessage()를 실행하면 자바스크립트에서 에러 발생함
      * - 멀티 파라미터 필요 시, JSON 객체 사용
      */
     let argument = {} 
     window.webkit.messageHandlers.`nativeFunction`.postMessage(argument)

• 비동기 - 값 리턴

  http://igomobile.de/2017/03/06/wkwebview-return-a-value-from-native-code-to-javascript/

  간단 요약

  • 응답으로 호출할 함수명을 전달 또는
  • Promise를 활용

WKWebView -> JS

WKWebView.evaluateJavaScript("jsFoo('hi');", completionHandler: nil)