Swift ) webView javascript 함수 실행 ( + 웹 다크모드 대응)

iOS, Swift

Swift ) webView javascript 함수 실행 ( + 웹 다크모드 대응)

EEYatHo 2021. 3. 15. 15:01

webView에서 자바스크립트 함수를 실행하는 방법

웹뷰의 JavaScript 함수

<script type="text/javascript">
function funcName() {
  return "OK";
}
</script>

Swift -> JavaScript 함수 호출

webView.evaluateJavaScript("funcName();") { (result, error) in
  print("Result: ", result)
  print("Error: ", error)
}

// 출력 결과
// Result: Optional("OK")
// Error: nil

응용 : 다크모드 대응 웹화면 색깔 변환

웹뷰의 JavaScript 함수

<head>
<script type="text/javascript">
function setDarkMode() {
  var span = document.getElementById("targetSpan");
  span.style.color = "#e3e2e3";
  document.body.style.background = "#1b1b1b";
  return "OK";
}

function setLightMode() {
  var span = document.getElementById("targetSpan");
  span.style.color = "#4b4b4b";
  document.body.style.background = "#faf7f0";
  return "OK";
}
</script>
</head>

<body>
<span id = "targetSpan" style= "font-family: -apple-system;">
...
</span>
</body>

Swift -> JavaScript 함수 호출

extension MyWebViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        if traitCollection.userInterfaceStyle == .dark { // Dark Mode
            webView.evaluateJavaScript("setDarkMode();") { (result, error) in
                print("Result: ", result)
                print("Error: ", error)
            }
        } else { // Light Mode
            webView.evaluateJavaScript("setLightMode();") { (result, error) in
                print("Result: ", result)
                print("Error: ", error)
            }
        }
    }
}