JavaScript to Native

JavaScript to Native

안드로이드에서 Bridge를 사용해서 Web에서 JavaScript 호출하면 Native를 호출 할수가 있었다.

안드로이드 예제

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new AndroidBridge(),"MyScript");

public class AndroidBridge {
    public void webViewClose() {
        Log.d(TAG, "웹뷰 닫기~")
    }
}

iOS7 이후 부터는 안드로이드 처리하는게 가능하다.
(그 전에는 shouldStartLoadWithRequest에서 scheme 파싱해서 처리 했었다.)

자세한 내용은 다음 WWDC를 참조 (WWDC 615 - Integrating JavaScript into Native Apps)

사용방법은 다음과 같다.

1. 호출할 프로토콜을 JSExport상속받아 생성

2. 자바스크립트 처리할 클래스 만들고 프로토콜 처리

   @objc protocol ScriptProtocol : JSExport  {
       func webViewClose()
   }
   
   @objc class MyScript: NSObject {
       var webView: UIWebView
       init(webView: UIWebView) {
           self.webView = webView
       }
   }
   extension MyScript: ScriptProtocol {
       func webViewClose() {
           print("웹뷰 닫기~")
       }
   }

3. WebView 로딩후 자바스크립트로 클래스와 함수 등록

   웹뷰 에서 delegate 설정하고 webViewDidFinishLoad에서 JavaScript를 실행시켜주면 된다.

   webView.delegate = self
   ...
   extension ViewController: UIWebViewDelegate {
       func webViewDidFinishLoad(_ webView: UIWebView) {
           let key = "documentView.webView.mainFrame.javaScriptContext"
   
           if let context = webView.value(forKeyPath: key) as? JSContext {
               context.setObject(MyScript(self.webView), forKeyedSubscript: "MyScript" as (NSCopying & NSObjectProtocol)!)
               context.evaluateScript("function webViewClose() {webViewClose();}")
           }
       }
   }

웹(JavaScript)에서는 다음과 같이 설정 되어 있으면 된다.

function webClose() {
    window.MyScript.webViewClose();
}

<button onclick="webClose();">종료</button>