개발/iOS

[iOS] 웹뷰를 활용해 HTML 콘텐츠 화면에 출력하기

라니킴 2023. 1. 26. 16:26

WebKit View를 사용해서 HTML content 화면에 출력하기

WebKit View
WebKit View

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

storyboard library에서 Webkit View 추가

add WebKitView

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()
 }