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 이란?
위 주소를 통해 확인해 보면, WKWebViewConfiguration 클래스를 사용하면 웹 페이지의 렌더링 속도, 미디어 재생 처리 방법, 사용자가 선택할 수있는 항목의 세분성 및 기타 여러 옵션을 결정할 수 있다고 명시되어 있습니다.
2-2. JavaScript가 앱 내 함수를 식별하기 위해서 WKWebViewConfiguration의 WKUserContentController를 사용하게 됩니다.
2-3. WKUserContentController 이란?
위 주소를 통해 확인해 보면, 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>" 일때 로직 처리
}
}
}
'개발' 카테고리의 다른 글
| iOS Cocoapods 사용하기 (0) | 2020.09.23 |
|---|---|
| Swift iOS WKWebView : Progress URL 로딩 퍼센트 사용하기 (코드 부분) (0) | 2020.09.22 |
| Swift iOS WKWebView : Swift -> JavaScript 함수 호출하기 (코드 부분) (0) | 2020.09.22 |
| Swift iOS WKWebView : WKUIDelegate 사용설정 (코드 부분) (0) | 2020.09.22 |
| Swift iOS WKWebView : WKNavigationDelegate 사용설정 (코드 부분) (0) | 2020.09.22 |