안녕하세요. 도미닉입니다.

오늘은 WKWebView 에 대해서 알아보겠습니다.

WKWebView 란?

WKWebView 는 iOS 8에서 생긴 웹 뷰를 보여주기 위한 UIView 입니다.

기존에 있었던 UIWebView 의 업그레이드 버전이라고 보시면 될 것 같습니다.

현재 UIWebView 는 아래 사진과 같이 deprecate 되었습니다.

WKWebView 를 이용해 간단히 웹페이지 띄우는 방법

1. WKWebView 화면을 mainStoryBoard 에 추가합니다.
2. 스토리보드에 추가한 WKWebView 를 viewController 에 연동합니다.
3. 아래와 같이 뷰컨트롤러를 작성하고 실행시킵니다.

간단하게 이미지를 띄우는 것처럼 웹페이지를 띄울 수 있었습니다.

WKUserScript 를 이용해 로드하는 웹페이지에 JavaScript 소스를 실행하는 방법

WKUserScript 를 이용하려면 WKWebView 초기화 시점에 적용해야하므로 소스로 WKWebView 를 만들어야합니다.

1. 스토리보드에 WKWebView 를 subView 로 추가할 UIView 를 하나 만듭니다.
2. containverView.swift 라는 UIView 의 하위 클래스를 만듭니다.
3. 만든 스토리보드의 UIView 에 커스텀 클래스 containverView 를 채택합니다.
4. containverView.swift 파일을 아래 내용으로 작성합니다.

위에 방법으로 WKUserScript 를 설정했음에도 불구하고 JavaScript 소스가 적용이 안될 때

페이지의 일부분은 나중에 로드되는 경우 WKUserScript 을 설정했음에도 불구하고 해당 부분에는 설정한 JavaScript 가 적용되지 않는 문제가 있었습니다.

그럴 때는 전체 페이지가 로드된 후에 자바 스크립트를 실행하면 됩니다.

아까 작성한 예제소스를 아래와 같이 수정하였습니다.

1. WKWebView 의 상태를 확인하기 위해 WKNavigationDelegate 을 채택하였습니다.
2. containverView 의 draw 메소드에 webView.navigationDelegate = self 을 추가하였습니다.
3. WKWebView 의 로드가 완료될 때 실행되는 webView(didFinish:) 메소드에 자바스크립트를 실행하는 webView.evaluateJavaScript 메소드를 추가하였습니다.

정리

이상으로 WKWebView 와 WKWebView 에서 자바스크립트를 실행하는 방법을 알아봤습니다.

궁금하신 점은 댓글 남겨주세요.

읽어주셔서 감사합니다.

뿅~

참고 :
https://zeddios.tistory.com/332 - UIWebView 와 WKWebView 의 차이점
https://medium.com/capital-one-tech/javascript-manipulation-on-ios-using-webkit-2b1115e7e405 - WKUserScript 사용 예제
https://faith-developer.tistory.com/60 - WebKit Delegate 설명
https://developer.apple.com/documentation/webkit/wkuserscript - wkuserscript 애플 공식 문서