clyne의 개발 기록

[Swift] WebKit 사용법에 대하여(JS interface Native call) 본문

iOS/Swift

[Swift] WebKit 사용법에 대하여(JS interface Native call)

clyne_dev 2021. 4. 13. 22:33

안녕하세요!

iOS 개발자 CNOO입니다.

오늘은 iOS  WebKit에 대해 알아볼건데요, 

 

애플에서 기본으로 제공하는  WebKit을 import하고 시작해봅시다.

 

먼저, 스토리보드나, Xib파일에서  WebKit을 검색해줍니다!

 

 

네. WebView는 Deprecated되었다 하니, WebKit View를 사용해봅시다.

 

이 것을 ViewController에 연결한 뒤에, (스토리보드)

 

위와 같이 로드해주면 되는데요,

 

제가 두시간동안 헤맸던 부분은 바로 Javascript interface부분이었습니다.

iOS 웹킷은, 안드로이드의 웹뷰와는 달리 

 

WKWebViewConfiguration의  userContentController 라는 변수에다가   WKUserContentController객체를 만들어서 넣어주어야 하는데요...

그런데!!!!!!!!!!!!

 

WKWebView를 스토리보드나 Xib파일에서 @IBOutlet으로 연결해주고,  WKWebViewConfiguration을  해당 WKWebView에 세팅하면 안 안되더라구요 ㅠㅠㅠㅠㅠㅠㅠ

그래서 제가 쓴 방법은

 

 

 

렛터디 웹뷰 Xib

 

위와같이, WKWebView가 들어갈 수 있는 UIView를 하나 만들어주신 뒤에, (Container)

이 UIView에  WKWebView객체를 만들어서 넣어주는 것입니다!!

아래 아래 렛터디의 웹뷰 뷰컨트롤러 코드를 보시죠!

 

 

 

위와 같이, WKScriptMessageHandler 를 implement해준 뒤에, 

userContentController 함수를 구현하여, 자바스크립트에서   원하는 네이티브 함수를 호출할 수 있게됩니다!

 

아!

자바스크립트에서는

window.webkit.messageHandlers.showLoading.postMessage("");

이렇게 호출하시면 돼요!!

저기 postMessage("") 안에 들어가는 String값은, 상단

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

 인자값 중에,  message.body로 받으실 수 있습니다! :)

 

도움이 되셨나요?

 

그럼 다음 시간에 만나요~