[iOS] WebView javaScript 함수 호출😨

Notice

Recent Posts

Recent Comments

Link

github

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

lgvv98

[iOS] WebView javaScript 함수 호출😨 본문

⚠️ deprecated ⚠️/트립플랜(TripPlan)

[iOS] WebView javaScript 함수 호출😨

🥕 캐럿맨 2021. 10. 25. 15:35

✅ 이번 시간에는 웹뷰를 통해 javaScript로 작성된 함수를 호출하고 처리하는 과정에 대해서 알아볼 예정이야.

하나하나 꼼꼼히 보다보면 분명히 다 이해할 수 있는 것들이었지만, WebView 개발로 js를 연결해서 작업하는게 익숙하지 않던 내게, 생각보다 어려운 작업이었어... (엄청난 삽질의 과정s)

(그나마 다행인건, 진로를 정하겠다고 js를 공부하여 웹 프로젝트를 수행했던 것이 정말정말 큰 도움이 되었다는 사실!)

✅ 목차

1️⃣ 웹 환경설정

2️⃣ iOS 환경설정

1️⃣ 웹 환경설정

- 우선 모바일 개발자였다면, 웹 페이지를 어떻게 만들어서 테스트 해볼지에 대해서 정말 막막하겠지?

그! 래! 서!

내가 간단하게 확인할 수 있도록 정리해줄 예정이야.

🔶 1. VSCode를 설치한다.

🔶 2. node.js를 설치한다.

https://nodejs.org/ko/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

위의 사이트에 접속하면 이런 사이트가 나올건데, 대부분 iOS 개발자들은 맥북을 사용할테니까, 저기서 설치하면 된다.

나는 그냥 왼쪽에 있는 안정적, 신뢰도 높음을 설치했음

-> 예전에 자바 버전을 올려둬서 지원을 하지 않는 몇몇 문제에 부딪혀서 결국 다운그레이드 했던 기억이 있어서 최신보다는 안정적으로 잘 돌아가는게 짱!

🔶 3. 설치가 잘 되었는지 확인하고 터미널로 작업하기

VSCode를 열어서 상단 메뉴바에 새 터미널 클릭!

여기서 터미널에

node --version

npm --version (node.js를 설치하면서 함께 설치된다.)

를 입력하면 정상적으로 설치가 되었다면 v ~ 라고 나올거야

자 그럼 정상적으로 설치된 것을 확인했다면 터미널에 다음과 아래의 코드를 작성해 주면 돼

npm install -g nodemon

-> 만약 권한 에러가 난다면 sudo npm install -g nodemon로 입력하기

설치 후에

npm install -g express-generator

-> 만약 권한 에러가 난다면 sudo npm install -g express-generator로 입력하기

🔶 4. 위의 작업을 우선적으로 잘 수행했다면 이제는 폴더열기를 할 예정인데, 폴더를 열어서 내가 원하는 프로젝트 파일명을 작성하고 프로젝트를 열기!

폴더를 만들었다면 터미널의 시작 위치가 자기가 만든 폴더명의 위치로 바뀌어 있을건데,

우리가 아까 설치한 express 패키지를 사용하여 터미널에 (터미널이 닫혀 있다면 새 터미널 열어주기)

express --ejs 폴더명

(예시) 만약 내가 폴더 열기를 통해 폴더명을 TestExpress로 만들었다면

express --ejs TestExpress 를 터미널에 입력해준다.

이 과정이 끝나면 아래 이미지처럼 파일이 똭! 하고 생길 것이다.

우리가 주목해야할 부분은 다른거 다 모르겠고~!

views - index.ejs 파일을 일단 보자.

🔶 5. index.ejs에 작성해줄 코드

<!DOCTYPE html>
<html>
  <head>
    <!-- <title><%= title %></title> -->
    <link rel='stylesheet' href='/stylesheets/style.css' />
    


  <script type="text/javascript" charset="UTF-8">
    
    function callNative() {
       try {
          webkit.messageHandlers.callbackHandler.postMessage("MessageBody");
          print("callNative");
       } catch(err) {
           alert(err);
       }
    }


    function redHeader() {
       alert('redHeader() CALL');
       document.querySelector('h1').style.color = "red";
    }

    function funcName() {
       return "OK";
    }
  </script>
  </head>
  <body>
       
    <h1>IOS용 메시지</h1>
    <br><input type="button" onclick= 'callNative()' value="네이티브 함수 호출"/>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    
  </body>
</html>

🔶 6. 웹에서 보기 위해 실행하는 과정

터미널에

nodemon ./bin/www

또는 nodemon start

둘중에 하나 입력해주면 돼.

그 이후에 크롬 브라우저에서

http://localhost:3000/ 입력해주기.

이런 웹 사이트를 확인할 수 있어.

2️⃣ iOS 환경설정

여기 부분은 Swift를 이용해서 작업할 예정이야.

Xcode열고 하는 작업이니까 부담없이 레츠고고!

🔶 1. 스토리보드 세팅

웹뷰를 넣은 다음에 레이아웃 잡아주면 끝!

🔶 2. ViewController.Swift 파일 작성하기

import UIKit
import WebKit

class ViewController: UIViewController,
                      WKNavigationDelegate,
                      WKUIDelegate,
                      WKScriptMessageHandler
{

	@IBOutlet weak var webView: WKWebView! // 스토리보드의 웹뷰 연결한 아웃렛 변수
    
    var activityIndicator: UIActivityIndicatorView = UIActivityIndicatorView() 
    // 웹뷰가 로드될 때 필요한 인디케이터

    override func viewDidLoad() {
        super.viewDidLoad()
       
        let myBlog = "http://localhost:3000" // express 통해서 연 URL 링크
        let url = URL(string: myBlog) // URL 타입으로 변경
        let request = URLRequest(url: url!) // Request 준비
        
        let contentController = WKUserContentController() // js랑 통신해서 받아온 값 다룰 핸들러
        let config = WKWebViewConfiguration() // 웹 뷰를 스토리보드 형식으로 만들 시 사용 불가능. 하지만 알아두기
        
        // native -> js call (문서 시작시에만 가능한, 환경설정으로 사용함), source부분에 함수 대신 HTML직접 삽입 가능
        let userScript = WKUserScript(source: "redHeader()", injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        contentController.addUserScript(userScript)
        
        // js -> native call : name의 값을 지정하여, js에서 webkit.messageHandlers.NAME.postMessage("");와 연동되는 것, userContentController함수에서 처리한다
        contentController.add(self, name: "callbackHandler")
        
        config.userContentController = contentController
        
        webView.uiDelegate = self
        webView.navigationDelegate = self
        
        // native -> js call page에 js를 주입하는 방법
        webView.evaluateJavaScript("javascript:redHeader()", completionHandler: { msg, err in
            print(msg)
            print(err?.localizedDescription)
        })
        webView.load(request) // 웹뷰를 로드해야지 사용할 수 있어.
    }
    
    
    // JS -> Native CALL
    @available(iOS 8.0, *)
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage){
        // message.name으로 판단한다.
        if(message.name == "callbackHandler"){
            print(message.body)
            abc()
        }
    }
    
    func abc(){
        print("abc call")
    }
    
    // WebView가 로드가 끝난 시점에 호출하는 함수
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    
        webView.evaluateJavaScript("javascript:redHeader()", completionHandler: { msg, err in
            print(msg)
            print(err?.localizedDescription)
        })
    }
    
} // ViewController

여기까지가 ViewController 파일에 대한 코드이다.

아주 간단한 기능들만 담고 있어서, 자세한 부분은 참고로 가서 확인해보면 더욱 좋다.

🔶 3. 결과물

결과물을 보면 redHeader() CALL이 호출되고, iOS용 메시지가 빨간색 글씨로 바뀐 것을 확인할 수 있다.

🔶 4. override func viewDidLoad() 와 override func loadView()의 차이점

다른 블로그를 참고하다 보니 viewDidLoad()가 아니라 loadView()를 작성해서 개발한 코드를 찾아볼 수 있었다.

어떤 차이가 있을까?

(공식 문서도 확인해 보았으나, 내가 알기 편하게 바꿔서 설명하도록 하겠움!)

-> 작성하려고 보니 내용이 많아서 다음 포스팅에서 다시 만나도록 해요~!

(참고)

https://zetal.tistory.com/entry/WKUserContentController

WKUserContentController 뽀개기

WKUserContentController 뽀개기 이번 포스팅에서는 WKWebView 기능 중에 하나인 WKUserContentController 기능을 살펴보겠습니다. WKWebView기능 중에 좋은 기능이 있습니다. 기존 UIWebView에서는 지원이 안됐던..

zetal.tistory.com

https://ios-development.tistory.com/701

[iOS - swift] 2. WKWebView 사용 방법 (웹뷰, 쿠키, WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate)

1. WKWebView 개념1 (UIWebView, AJAX, XHR, 캐시, 쿠키) 2. WKWebView 사용 방법 (웹뷰, 쿠키, WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate) WKWebView를 사용하기 전 알아야할 기본 개..

ios-development.tistory.com

https://yagom.net/forums/topic/loadview%EC%99%80-viewdidload-%EC%B0%A8%EC%9D%B4%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4/

loadView와 viewDidLoad 차이에 대한 질문입니다. - 야곰닷넷

안녕하세요. Swift를 공부한지 시간이 흐르니 스토리보드와 인터페이스 빌더로 UI를 구성하는 거 보다 코드만으로 View를 그리는 […]

yagom.net

'⚠️ deprecated ⚠️ > 트립플랜(TripPlan)' 카테고리의 다른 글

[iOS] UIPasteboard 클립보드 복사하기 (0)	2022.02.07
[iOS15] 위치 권한 확인하는 함수 📍 (0)	2021.11.04
[iOS15] Alert을 통해 설정창으로 들어가기 ⚙️ (0)	2021.11.04
[iOS] WKWebView에 대해서 알아보자 (iOS 블로그 추천!)😇 (0)	2021.10.26
[iOS] viewDidLoad() vs. loadView() 의 차이 (0)	2021.10.26

'⚠️ deprecated ⚠️/트립플랜(TripPlan)' Related Articles

Comments

lgvv98

[iOS] WebView javaScript 함수 호출😨 본문

[iOS] WebView javaScript 함수 호출😨

'⚠️ deprecated ⚠️ > 트립플랜(TripPlan)' 카테고리의 다른 글

티스토리툴바