Uncaught TypeError: Object [object Object] has no method 오류해결

출처 : http://theeye.pe.kr/538

Android상에서 웹뷰를 사용하면서 Javascript 인터페이스를 사용하여 웹과 네이티브 코드간에 통신을 할 수 있습니다. 하지만 Android 4.2부터는 정상적으로 동작하지 않고 오류가 발생하는것을 발견하였습니다. 다음은 오류를 확인할 수 있는 간단한 코드입니다.

this.webView.getSettings().setJavaScriptEnabled(true);
this.webView.setWebChromeClient(new WebChromeClient());
this.webView.addJavascriptInterface(new Object() {
    public void handshake() {
        Log.d("JS", "handshake no params");
    }

    public void handshake(String json) {
        Log.d("JS", "handshake with params: " + json);
    }
}, "Android");

Javascript에서는 다음과 같이 위의 handshake()를 호출할 수 있습니다.

Android.handshake();

하지만 logcat에 다음과 같은 오류가 발생합니다.

E/Web Console: Uncaught TypeError: Object [object Object] has no method 'handshake'

여기서 중요한점은 4.2 이전버전들에서는 매우 잘 동작하는 API라는것입니다. 확인해본 결과 4.2(API 17)부터 Javascript에서 접근하려는 메소드에는 어노테이션을 추가해주어야 하도록 변경되었습니다. [확인]

결과적으로 위의 코드는 다음과 같이 @JavascriptInterface를 추가해주면 정상적으로 동작합니다. 물론 빌드 타켓을 API 17이상으로 해줄 필요가 있습니다.

this.webView.getSettings().setJavaScriptEnabled(true);
this.webView.setWebChromeClient(new WebChromeClient());
this.webView.addJavascriptInterface(new Object() {
    public void handshake() {
        Log.d("JS", "handshake no params");
    }

    @JavascriptInterface
    public void handshake(String json) {
        Log.d("JS", "handshake with params: " + json);
    }
}, "Android");

참고 : http://stackoverflow.com/questions/14031635/android-4-2-1-webview-and-javascript-interface-breaks