15. [iOS/Swift] 웹뷰(WKWebView)와 JavaScript 연동(간략) (Native <-> JavaScript)

JavaScript -> Native 호출

1. Javascript에서 iOS에 호출할 함수를 작성합니다.

<script>
var message = "Hello World"
 
window.webkit.messageHandlers.callNativeFunction.postMessage(message);
</script>

 

2. ViewController.swift에서 호출될 함수를 작성합니다.

webView에  configuration 값을 추가해야 줘야합니다.

그리고 frame: 값은 제가 임의로 .main이라고 설정했습니다. 현재 웹뷰에서 받고있는 프레임 정보를 입력해야됩니다.

 

let contentController = WKUserContentController()
let configuration     = WKWebViewConfiguration()
 
contentController.add(self, name: "callNativeFunction")
configuration.userContentController = contentController

webView = WKWebView(frame: .main, configuration: configuration)

 

 

3. ViewController: WKScriptMessageHandler{} 안에 userContentController를 추가합니다.

// JS -> Native CALL
@available (iOS 8.0, *)
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print(message)
 
if(message.name == "callNativeFunction"){
    print("callNativeFunction 호출 \(message.body)")
}

 

switch를 이용한 분기 방법

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        switch message.name {
        case "callNativeFunction":
            print("callNativeFunction 호출 \(message.body)")
        case "test2":
            print("test2 호출 \(message.body)")
        default:
            break
        }
    }

 

주의

전달한 메시지가 없어도 아래 메소드를 체이닝해주어야 합니다.

postMessage(true)

---

Native -> JavaScript 호출

webView.evaluateJavaScript("함수명(매개변수)")

webView.evaluateJavaScript("outPutMessage('abc')")