프론트엔드

안드로이드 + 웹뷰 웹앱에서 외부 인터넷창 띄우기

개발자R 2021. 12. 22. 15:24
반응형

제가 개발하고 있는 앱은 웹앱입니다.

안드로이드 소스는 거의 껍데기만 있을 뿐. 내용물은 모두 svelte 프레임워크로 이루어져 있습니다.

그래서 뭔가 어려운 점이 있을 때 검색이 잘 안되는 점이 아쉽습니다... 모두 네이티브만 쓰는건가!

 

이번에 아주 간단한 새로운 기능을 추가하는데, 어려움에 봉착했습니다.

버튼을 누르면 어떤 웹페이지로 이동해야하는데, 웹뷰 내에서가 아니라 외부 브라우저로 띄우고 싶었거든요.

그냥 window.open() 등의 함수를 사용하면 웹뷰 내에서 이동하는 문제가 있었습니다.

 

안드로이드 소스를 수정해야했습니다. (안드로이드 안배워봄...ㅎ)

* 안드로이드 소스에 함수 추가

@JavascriptInterface
    public boolean shouldOverrideUrlLoading(String url) {
        
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
    }

 참고 : https://developer.android.com/guide/webapps/webview#java

안드로이드 개발자 가이드 페이지에선 웹뷰 클래스 내에  @Override 를 하도록 되어있지만, 우리 앱은 완전 다르게 생겼기 때문에 적용할 수 없었다. 대신 @JavascriptInterface 를 붙여주었다.

 

* 네이티브 함수를 콜하는 함수 (웹뷰 소스)

function nativeCall(func){
  var el = document.createElement('script');
  el.appendChild(document.createTextNode('try { nativeResult = window.App.' + func + '; } catch(e) { nativeResult = "error"; error_msg = e; console.log(e); }'));
  document.body.appendChild(el);
  let lastResult = nativeResult;
  el.remove();
  return lastResult;
}

 

* 버튼 클릭 시 실행하는 부분 (웹뷰 소스)

nativeCall("shouldOverrideUrlLoading('https://www.가고자하는페이지.com')")

 

기대하지 않았는데 너무 잘 동작합니다!!

반응형