WebView 앱의 Button 액션 구현하기

Posted on 2021-09-05 by GKSRUDTN99
Swift&Xcode Xcode WebView

Site1, Site2 버튼에 대한 코드 추가하기

1. Site1과 Site2 버튼을 클릭해서 이동할 웹 사이트의 주소를 btnGoSite1, btnGoSite2 함수에 추가한다.
@IBAction func btnGoSite1(_ sender: UIButton) {
        loadWebPage("https://naver.com")
    }

@IBAction func btnGoSite2(_ sender: UIButton) {
        loadWebPage("https://codecamper.me/blog/")
    }

정지, 재로딩, 이전페이지로 이동, 다음 페이지 Button에 대한 코드 추가하기

1. btnStop, btnReload, btnGoBack, btnGoForward 함수에 다음 코드들을 추가한다.
@IBAction func btnStop(_ sender: UIBarButtonItem) {
        myWebView.stopLoading()
    }

@IBAction func btnReload(_ sender: UIBarButtonItem) {
        myWebView.reload()
    }

@IBAction func btnGoBack(_ sender: UIBarButtonItem) {
        myWebView.goBack()
    }

@IBAction func btnGoForward(_ sender: UIBarButtonItem) {
        myWebView.goForward()
    }

HTML Button에 대한 코드 추가하기

1. 다음 코드를 btnLoadHtmlString 함수 안에 입력한다.
@IBAction func btnLoadHtmlString(_ sender: UIButton) {
        let htmlString = "<h1> HTML String </h1><p> String 변수를 이용한 웹 페이지 </p> <p><a href=\"https://codecamper.me/blog/\">blog</a>로 이동</p>"
        myWebView.loadHTMLString(htmlString, baseURL: nil)
    }
  • loadHTMLString 함수를 이용해 변수에 저장된 HTML문을 WebView에 나타낸다.

File Button에 대한 코드 추가하기

1. 프로젝트의 Root폴더 아래에 'htmlView.html' 파일을 새로 만든다.
  • New File에서 Empty File을 사용한다.
2. htmlView.html 파일을 다음과 같이 작성한다.
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1> HTML FILE </h1>
        html File을 이용한 웹페이지<br>
        <p><a href = "https://codecamper.me/blog/">CodeCamper의 블로그</a>로 이동</p>
    </body>
</html>
3. ViewController.swift에서 btnLoadHtmlFile 함수를 다음과 같이 작성한다.
@IBAction func btnLoadHtmlFile(_ sender: UIButton) {
        let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html")
        let myUrl = URL(fileURLWithPath: filePath!)
        let myRequest = URLRequest(url: myUrl)
        myWebView.load(myRequest)
    }
  • Bundle.main.path 함수를 사용해 htmlView.html의 파일에 대한 path 변수를 생성한다.
  • Bundle.main.path 함수를 사용해 프로젝트 내에 있는 파일의 경로를 가져 올 수 있다.
  • 프로젝트 경로 아래에 있는 파일을 찾아오기 때문에, 기기가 바뀌어도 파일을 가져오는데 문제가 없다.

Go Button에 대한 코드 추가하기

1. http:// 문자열을 자동으로 추가해주는 checkUrl 함수를 추가하기
func checkUrl(_ url: String) -> String {
        var strUrl = url
        let flag = strUrl.hasPrefix("http://") || strUrl.hasPrefix("https://")
        if !flag {
            strUrl = "http://" + strUrl
        }
        return strUrl
    }
2. Go 버튼을 눌렀을 때 TextField에 적힌 주소로 WebView가 로딩되도록 btnGotoUrl 함수를 작성한다.
@IBAction func btnGotoUrl(_ sender: UIButton) {
        let myUrl = checkUrl(txtUrl.text!)
        txtUrl.text = ""
        loadWebPage(myUrl)
    }

Search