[스위프트 기초] 7장 웹 뷰 사용해보기 / 웹 뷰와 웹앱 차이점

웹 뷰?

웹 콘텐츠를 뷰 형태로 보여주는 앱. HTML로 작성된 홈페이지 표시 가능

웹 뷰와 웹 앱?

가장 큰 차이는 웹 뷰는 app에서 구동되고, 웹 앱은 브라우저에서 동작한다는 점.

따라서 새 프로젝트를 만들 때 웹앱으로 만듦...

기본 화면 구성 

+

-액티비티 인디케이터 뷰 (Activity Indicator View) : 돌아가는 로딩바 

//지정 웹페이지 보여주기
    func loadWebPage(_ url: String){
        let myUrl = URL(string: url) //url 값을 받아 URL 형으로 선언
        let myRequest = URLRequest(url:myUrl!)  //myUrl을 받아 URL Request 형으로 선언
        myWebView.load(myRequest)   //MyWebView의 load메서드 사용
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        loadWebPage("https://blog.naver.com/minulbora")
    }

안나옴...

해결!

WKNavigationDelegate 컨트롤러에 추가

class ViewController: UIViewController, WKNavigationDelegate {

    @IBOutlet var txtUrl: UITextField!
    @IBOutlet var myActivityIndicator: UIActivityIndicatorView!
    @IBOutlet var myWebView: WKWebView!
    
    //지정 웹페이지 보여주기
    func loadWebPage(_ url: String){
        let myUrl = URL(string: url) //url 값을 받아 URL 형으로 선언
        let myRequest = URLRequest(url:myUrl!)  //myUrl을 받아 URL Request 형으로 선언
        myWebView.load(myRequest)   //MyWebView의 load메서드 사용
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        myWebView.navigationDelegate = self
        loadWebPage("https://blog.naver.com/minulbora")
    }
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        myActivityIndicator.startAnimating()
        myActivityIndicator.isHidden = false
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        myActivityIndicator.stopAnimating()
        myActivityIndicator.isHidden = true
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        myActivityIndicator.stopAnimating()
        myActivityIndicator.isHidden=true
    }
}

html 버튼 활성화 : html은 "" 안에 주소 넣어야 에러 없이 보여줄 수 있음

@IBAction func btnLoadHtmlString(_ sender: UIButton){
        let htmlString = "<h1> HTML String </h1><p> String 변수를 이용한 웹 페이지 </p><p><a href=\"https://blog.naver.com/minulbora\">minulbora</a>으로 이동</p>"
        myWebView.loadHTMLString(htmlString, baseURL: nil)
    }

-file 버튼 연결하기

 @IBAction func btnLoadHtmlFile(_ sender: UIButton) {
        let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html") //path 변수 생성
        let myUrl = URL(fileURLWithPath: filePath!) //path 변수를 사용해 url 생성
        let myRequest = URLRequest(url:myUrl)
        
        myWebView.load(myRequest)
    }

화면 꾸미기 html 소스 출처... gpt....

텍스트 필드에 이동할 페이지 쓰고 이동. 

    func checkUrl(_ url: String) -> String { // 함수 만들 때 파라미터명 없이 사용하고 싶을 때는 앞에 _ 붙이면 됨.
        var strUrl = url
        let flag = strUrl.hasPrefix("http://")
        if !flag {
            strUrl = "http://" + strUrl
        }
        return strUrl
    }
    
    @IBAction func btnGotoUrl(_ sender: UIButton) {
        let myUrl = checkUrl(txtUrl.text!)
        txtUrl.text=""
        loadWebPage(myUrl)
    }

!! 전체 코드!!

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    @IBOutlet var txtUrl: UITextField!
    @IBOutlet var myActivityIndicator: UIActivityIndicatorView!
    @IBOutlet var myWebView: WKWebView!
    
    //지정 웹페이지 보여주기
    func loadWebPage(_ url: String){
        let myUrl = URL(string: url) //url 값을 받아 URL 형으로 선언
        let myRequest = URLRequest(url:myUrl!)  //myUrl을 받아 URL Request 형으로 선언
        myWebView.load(myRequest)   //MyWebView의 load메서드 사용
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        myWebView.navigationDelegate = self
        loadWebPage("https://blog.naver.com/minulbora")
    }
    

    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        myActivityIndicator.startAnimating()
        myActivityIndicator.isHidden = false
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        myActivityIndicator.stopAnimating()
        myActivityIndicator.isHidden = true
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        myActivityIndicator.stopAnimating()
        myActivityIndicator.isHidden=true
    }

    func checkUrl(_ url: String) -> String { // 함수 만들 때 파라미터명 없이 사용하고 싶을 때는 앞에 _ 붙이면 됨.
        var strUrl = url
        let flag = strUrl.hasPrefix("http://")
        if !flag {
            strUrl = "http://" + strUrl
        }
        return strUrl
    }
    
    @IBAction func btnGotoUrl(_ sender: UIButton) {
        let myUrl = checkUrl(txtUrl.text!)
        txtUrl.text=""
        loadWebPage(myUrl)
    }
    @IBAction func btnGoSite1(_ sender: UIButton) {
        loadWebPage("https://www.naver.com")
    }
    @IBAction func btnGoSite2(_ sender: UIButton) {
        loadWebPage("https://afterlosscow.tistory.com")
    }
    @IBAction func btnLoadHtmlString(_ sender: UIButton){
        let htmlString = "<h1> HTML String </h1><p> String 변수를 이용한 웹 페이지 </p><p><a href=\"https://blog.naver.com/minulbora\">minulbora</a>으로 이동</p>"
        myWebView.loadHTMLString(htmlString, baseURL: nil)
    }
    @IBAction func btnLoadHtmlFile(_ sender: UIButton) {
        let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html") //path 변수 생성
        let myUrl = URL(fileURLWithPath: filePath!) //path 변수를 사용해 url 생성
        let myRequest = URLRequest(url:myUrl)
        
        myWebView.load(myRequest)
    }
    
    
    @IBAction func btnGoForword(_ sender: UIBarButtonItem) {
        myWebView.goForward()
    }
    @IBAction func btnRewind(_ sender: UIBarButtonItem) {
        myWebView.goBack()
    }
    @IBAction func btnReload(_ sender: UIBarButtonItem) {
        myWebView.reload()
    }
    @IBAction func btnStop(_ sender: UIBarButtonItem) {
        myWebView.stopLoading()
    }
}

---