[iOS] HTML String으로 WKWebView 로드하기

 

HTML String을 UILabel에 적용하는 등의 간단한 작업은 String Extension을 추가해서 아래와 같이 사용할 수 있습니다.

 

extension String {
    var htmlToAttributedString: NSAttributedString? {
        guard let data = self.data(using: .utf8) else { return nil }
        do {
            return try NSAttributedString(data: data,
                                          options: [.documentType: NSAttributedString.DocumentType.html,
                                                    .characterEncoding:String.Encoding.utf8.rawValue],
                                          documentAttributes: nil)
        } catch {
            return nil
        }
    }
}

myLabel.attributedText = htmlText.htmlToAttributedString

 

 

그런데 제 경우는 보여줘야 하는 HTML String에 CSS link태그가 포함되어 있고,

link태그가 외부의 stylesheet와 연결되어 있어 웹 url에 접근해서 CSS 설정을 적용해야 했습니다.

 

그래서 웹 url에 접근할 수 있도록 loadHTMLString 함수를 이용해

HTML String을 직접 WKWebView에 로드하는 방법을 사용해보겠습니다!

 

 

---

 

loadHTMLString

var webview = WKWebView()

override func viewDidLoad() {
    self.webview.frame = self.view.frame
    self.view.addSubview(self.webview)
    
    let styleFormat = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">%@"
    let html = "<link rel=\"stylesheet\" type=\"text/css\" href="링크" /><div>내용</div>"
    
    let htmlString = String(format: styleFormat, html)
    self.webview.loadHTMLString(htmlString, baseURL: nil)
}

 

우선 뷰 전체를 꽉 채우는 웹뷰를 만들어주었습니다.

 

html이라는 변수에 HTML String을 작성해주었고

('링크', '내용'에는 각자 해당하는 텍스트 넣으시면 됩니다!)

 

styleFormat이라는 변수를 추가로 작성해주었는데요.

이 변수는 HTML String을 웹뷰에 로드할 때 모바일에 최적화된 화면을 그리도록 하는 meta 태그를 담고 있습니다.

 

 

• width=device-width : 기존에 왼쪽 화면처럼 보이던 컨텐츠가 오른쪽 화면처럼 모바일 디바이스의 너비에 맞게 조정됩니다.
• initial-scale=1.0 : 초기 zoom 크기를 1로 설정합니다.
• minimum-scale=1.0 : 최소 zoom 크기를 1로 설정합니다.
• maximum-scale=1.0 : 최대 zoom 크기를 1로 설정합니다.
• user-scalable=no : 유저의 double touch나 pinch를 통한 zoom action을 막습니다.

 

 

이 태그가 필요하지 않다면 제거하고 바로 loadHTMLString에 html변수를 넣어 실행하면 됩니다.

저는 meta 태그 뒤에 html 변수를 붙여서 loadHTMLString을 실행시켰습니다.

 

width=device-width 적용 전후

 

웹 CSS 파일로부터 가져온 스타일이 적용된 모습입니다! 👍

 

 

 

---

 

Dynamic Height

만약 웹뷰의 높이까지 컨텐츠 높이에 맞춰 조절해주고 싶다면 아래 코드를 추가해주면 됩니다.

 

class ViewController: UIViewController {
    override func viewDidLoad() {
        self.webView.navigationDelegate = self
    }
}

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        self.webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
            if complete != nil {
                self.wv.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
                    self.webViewHeight.constant = height as! CGFloat
                })
            }
        })
    }
}

 

WKNavigationDelegate를 채택하고,

navigationDelegate 대리자를 설정하고,

 

didFinish 함수에서 컨텐츠의 높이를 받아오면 되는데,

didFinish가 불렸다고 컨텐츠의 사이즈가 바로 결정되는 게 아니라서 한 단계를 더 수행해주어야 합니다.

 

document의 로딩 상태를 확인하는 document.readyState 스크립트 함수를 실행해주는건데요.

실행 결과 로딩이 완료되었다면 그 때 document.body.scrollHeight 스크립트 함수로 실행해서 높이를 받아오면 됩니다.

 

 

 

 

---

참고

https://stackoverflow.com/questions/37048759/swift-display-html-data-in-a-label-or-textview

https://stackoverflow.com/questions/27515236/how-to-determine-the-content-size-of-a-wkwebview