[iOS] WKWebView에서 웹문서 스크롤 높이 구하기

🎯 개요

iOS 앱에서 WKWebView를 사용할 때, 웹문서의 실제 컨텐츠 높이를 알아야 할 때가 많음.
예를 들어, 웹뷰의 높이를 컨텐츠에 맞게 동적으로 조정하거나, 테이블뷰 셀 내부에서 웹뷰가 잘리는 현상을 방지하려면 웹문서의 전체 스크롤 높이를 정확히 알아야 함.
이 글에서는 WKWebView에서 JavaScript를 활용해 스크롤 높이를 구하는 실전 방법을 정리함.

---

📦 Step 1: WKWebView 델리게이트 설정 및 didFinish 구현

WKWebView의 navigationDelegate를 설정하고, 웹페이지 로딩이 끝났을 때 호출되는 didFinish 메서드에서 JavaScript를 실행해야 함.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
        if complete != nil {
            webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { [weak self] (height, error) in
                    let h = (height as? CGFloat) ?? 0
                    self?.contentHeightEvent.accept(h)
                    webView.scrollView.isScrollEnabled = false
            })
        }
    })
}

Explanation

• document.readyState로 DOM이 완전히 로드됐는지 확인함
• 준비 완료 시 document.body.scrollHeight로 실제 컨텐츠 높이 구함
• RxSwift의 contentHeightEvent.accept(h)로 높이값 전달함(필요에 따라 수정 가능)
• 웹뷰 스크롤 비활성화하려면 webView.scrollView.isScrollEnabled = false 설정함

---

📦 Step 2: 컨텐츠 높이값 활용

구한 높이값을 활용해 웹뷰의 frame이나 오토레이아웃을 동적으로 조정할 수 있음.

// 예시: 높이값을 받아 웹뷰 높이 업데이트
self.webViewHeightConstraint.constant = contentHeight
self.view.layoutIfNeeded()

Explanation

• 웹뷰의 높이 제약조건을 구한 값으로 업데이트함
• 테이블뷰 셀, 스크롤뷰 등 다양한 UI에 적용 가능함

---

🔧 Troubleshooting

Issue 1: 높이가 0으로 나오는 경우

Solution: 웹페이지가 완전히 로드된 후에만 JavaScript 실행해야 함. 이미지나 동적 컨텐츠가 많을 경우, 추가로 로딩 완료 시점을 체크하거나 지연 실행 필요함.

Issue 2: JavaScript가 동작하지 않는 경우

Solution: WKWebView의 JavaScript 실행이 비활성화된 경우임. WKWebViewConfiguration에서 JavaScript를 활성화해야 함.

---

🔗 References

• How to determine the content size of a WKWebView?