개발/iOS
[iOS] 웹뷰를 활용해 HTML 콘텐츠 화면에 출력하기
라니킴
2023. 1. 26. 16:26
WebKit View를 사용해서 HTML content 화면에 출력하기

storyboard에서 webkit View를 활용해서 HTML 콘텐츠를 화면에 표시하도록 UI를 구성해봤다.
storyboard library에서 Webkit View 추가

Web View가 deprecated 되어 더 이상 사용되지 않는다. 앞으로는 WebKit View를 사용하시면 된다.
textField에 url을 입력하면 해당 url로 이동해 콘텐츠를 로드하고 이동하도록 설정했다.
@IBOutlet weak var webView: WKWebView!
func go(to urlStr: String) {
guard let url = URL(string: urlStr) else {
fatalError("Invalid URL")
}
let request = URLRequest(url: url)
webView.load(request)
}
URLRequest struct는 url을 통해 네트워크 객체를 생성한다.
http method나 요청 헤더를 추가할 수도 있다.
URLRequest 객체를 생성하면 load() 메서드로 지정된 URL 웹 콘텐츠를 로드하고 해당 콘텐츠로 이동할 수 있도록 한다.
class WebContentViewController: UIViewController {
@IBOutlet weak var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView.navigationDelegate = self
}
}
WKWebView는 새로고침, 앞으로 가기, 뒤로 가기 등 페이지 사이를 탐색하는 기능을 제공한다.
이러한 기능을 사용하기 위해서는 WKNavigationDelegate 프로토콜을 채택해야한다.
페이지 탐색에 실패했을 때 에러 내용을 확인할 수 있도록 아래 코드처럼 에러처리를 해줬다.
extension WebContentViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
print(error)
}
}
UI에 앞으로 가기 버튼, 뒤로 가기 버튼을 포함한다면 해당 메소드를 연결하여 액션을 활성화할 수 있다.
앞으로 가기
@IBAction func goForward(_ sender: Any) {
if webView.canGoForward {
webView.goForward()
}
}
뒤로 가기
@IBAction func goBack(_ sender: Any) {
if webView.canGoBack {
webView.goBack()
}
}
새로고침
@IBAction func reload(_ sender: Any) {
webView.reload()
}