WebView, JS 양방향 통신
iOS 애플리케이션에서 WKWebView를 사용하면 웹 콘텐츠를 표시할 수 있을 뿐만 아니라, JavaScript와 네이티브 코드 간의 양방향 통신도 가능하다. 이를 통해 네이티브 코드와 웹 콘텐츠 간의 상호작용을 구현할 수 있다.
네이티브 -> JavaScript
evaluateJavaScript 메서드
iOS에서 evaluateJavaScript 메서드 사용,
웹 페이지에서 미리 정의해둔 네이티브로부터 메시지를 받을 JavaScript 함수를 호출하여 웹 페이지에 메시지를 보낼 수 있다.
@objc func sendMessageToJavaScript() {
// 자바스크립트에 미리 정의해둔 메소드
let jsCode = "receiveMessage('Hello from Native')"
webView.evaluateJavaScript(jsCode) { (result, error) in
if let error = error {
print("JavaScript execution error: \(error.localizedDescription)")
} else {
print("JavaScript executed successfully: \(result ?? "No result")")
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebView Test</title>
<script type="text/javascript">
function receiveMessage(message) {
alert("Message from Native: " + message);
}
</script>
</head>
<body>
<button onclick="sendMessageToNative()">Send Message to Native</button>
</body>
</html>JavaScript -> 네이티브
WKScriptMessageHandler 프로토콜 구현
JavaScript에서 네이티브 코드로 메시지를 보내기 위해 WKScriptMessageHandler 프로토콜을 구현해야 한다. 이 프로토콜은 JavaScript로부터의 메시지를 처리하는 메서드를 제공한다.
import UIKit
import WebKit
class ViewController: UIViewController {
var webView: WKWebView!
override func loadView() {
// WKWebViewConfiguration 인스턴스 생성
let webConfiguration = WKWebViewConfiguration()
// WKUserContentController 인스턴스 생성
let contentController = WKUserContentController()
// contentController의 add 메소드로 JavaScript 메시지 핸들러 추가
contentController.add(self, name: "jsHandler")
// WKWebViewConfiguration의 userContentController 설정
webConfiguration.userContentController = contentController
// WKWebView 인스턴스 생성 및 설정
webView = WKWebView(frame: .zero, configuration: webConfiguration)
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let myURL = URL(string: "https://www.example.com")
let myRequest = URLRequest(url: myURL!)
webView.load(myRequest)
}
}
// MARK: - WKScriptMessageHandler
extension ViewController: WKScriptMessageHandler {
// JavaScript에서 네이티브로 메시지를 보낼 때 호출됨
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
// 메시지 이름 확인 후 처리
if message.name == "jsHandler", let messageBody = message.body as? String {
print("JavaScript message received: \(messageBody)")
}
}
}