/Javascript alert 안뜸 - /Javascript alert antteum

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

아래는 제가 WebView를 셋팅하는 소스 입니다.

// Enable pinch to zoom without the zoom buttons
mWebView.getSettings().setBuiltInZoomControls(true);
// Enable pinch to zoom without the zoom buttons
if(Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
    // Hide the zoom controls for HONEYCOMB+
    mWebView.getSettings().setDisplayZoomControls(false);
}
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH)
    mWebView.getSettings().setTextZoom(100);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.setWebViewClient(new WebViewClient());
mWebView.loadUrl(mBean.content);

setJavaScriptEnabled를 true 하는 것만으로 Alert창이 뜨지 않습니다.

WebView를 ChromeClient로도 사용을 해야 Alert창이 뜨게 됩니다.

즉, ChromeClient의 콜백 함수를 통해 Alert 창이 뜨게 되는 거죠.

아래 함수를 보겠습니다.

mWebView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
});

onJsAlert 콜백 함수가 WebView에서 Alert창을 호출 했을때 넘어오게 됩니다.

이때 부모 클래스인 WebChromeClient에서 Dialog를 띄어주게 되는 거죠.

즉, Web Dialog가 아니라 App Dialog가 뜨는 겁니다.

참고로!!

setWebViewClient를 해주면, WebView에 웹페이지를 출력하게 됩니다.

setWebViewClient를 사용하지 않으면 브라우저 선택창이 뜨게 되는 거죠.

그래서 아래와 같이 setWebChromeClient와 setWebViewClient를 같이 설정을 하면

WebView 상에서 Chrome 브라우저와 같은 동작이 이뤄지게 되는거죠.

mWebView.setWebChromeClient(new WebChromeClient());
mWebView.setWebViewClient(new WebViewClient());

참고하세요.

function makePW(){
  log("임시패스워드 찾기");
  var obj = document.getElementById("imgPW");
  //alert(obj);
  if(obj != null){
   obj.innerHTML="<img src='PasswordServlet'>";
  }

    var inputObj = document.getElementById("inputPW");
  if(inputObj != null){
   inputObj.innerHTML=
    "<form action='' method='post'>"+
    "<input type='text' name='tempPW'>"+
    "<input type='submit' value='확인'>"+
    "</form>"
  }
}

//오류 잡는 거   makePW 안에 log로찍는다
function log(msg){

//<div id = "debugDIV"></div> html 코드 안에 한줄 넣어준다.. 
 var logObj = document.getElementById("debugDIV");

if(logObj!=null){
  logObj.innerHTML +=msg+"<br>";
 }

  }

WebView와 WebSettings라는 글에서 알 수 있듯이, 최근에 WebView를 사용한 기능을 추가하는 작업을 진행했다. 버튼을 누르면 WebView가 표시된 Activity를 출력해주고, WebView에서의 작업이 끝나면 기존의 Activity로 돌아가는 기능이었다. 기능을 추가하고났더니 담당자로부터 다시 한 번 메일로 연락이 왔다. 기능이 제대로 동작하지 않는다는 내용이었는데, 무슨 기능인지 다시 문의하고나니 Alert가 출력되지 않는다는 것이었다.

WebView의 WebSettings를 이용해서 javascript를 사용하도록 설정하더라도, alert는 동작하지 않는다. alert자체가 Javascript에서 지원하는 게 아니라, 브라우저에서 지원하는 Web API이기 때문인 듯 하다. 다행히도 WebChromeClient에 alert가 발생했을 시 동작하는 onJSAlert가 있다. 이 메서드를 사용하면 alert가 발생했을 때, WebView에서 어떻게 처리할 지 결정할 수 있다.

/**
 * Tell the client to display a javascript alert dialog.  If the client
 * returns true, WebView will assume that the client will handle the
 * dialog.  If the client returns false, it will continue execution.
 * @param view The WebView that initiated the callback.
 * @param url The url of the page requesting the dialog.
 * @param message Message to be displayed in the window.
 * @param result A JsResult to confirm that the user hit enter.
 * @return boolean Whether the client will handle the alert dialog.
 */
public boolean onJsAlert(WebView view, String url, String message,
        JsResult result) {
    return false;
}

위는 WebChromeClient의 onJsAlert이다. 기본적으로 false를 반환한다. 따라서 WebSettings를 이용해서 WebChromeClient를 사용하도록 설정하면, javascript에서alert를 통해 전달되는 내용이 다이얼로그 형태로 표시된다. 만약 onJsAlert를 Override하여 메시지를 다른 방식으로 출력하고자 할 경우, onJsAlert를 Override한 후 return값을 true로 설정해주면 된다.

WebView mWebView = (WebView)findViewById(R.id.id_web_view);

mWebView.setWebChromeClient(new WebChromeClient(){ // mWebView에 WebChromeClient를 사용하도록 설정한다.
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result); // super.onJsAlert는 false를 return한다.
    }
});

당연하지만 위에서 Override한 onJsAlert는 단순히 super.onJsAlert(view, url, message, result)를 호출하기 때문에, 생략해도 상관없다. 보여주기 위한 코드다. 일반적으로 alert에 대한 내용을 커스터마이징하지 않는다면, 다음과 같은 결과가 될 것이다.

WebView mWebView = (WebView)findViewById(R.id.id_web_view);

mWebView.setWebChromeClient(new WebChromeClient()); // 기본적으로는 Overriding이 필요없다.

만약 alert를 다른 방식으로 표현해주기 위해서는, onJsAlert 내부에 표현방식을 구현한 후 return값만 true로 바꿔주면 된다는 사실을 기억하도록 하자. 참조한 글들에서는 AlertDialog를 이용해서 표시해주거나, 같은 방식으로 onJsConfirm을 사용하여 confirm을 처리하는 방식들을 보여주고 있다.

참조:

• WebChromeClient, Android Developers
• WebView, Android Developers

---

• [Android] WebView 사용 시 Javascript Alert, Confirm 출력
• 안드로이드개발 웹뷰에서 경고창(alert)이 반응 없을 때
• JavaScript alert not working in Android WebView, StackOverflow
• [안드로이드] 웹뷰(WebView)에서 자바스크립트 alert 띄우기
• [Android] WebView에서 Javascript Alert 창이 보이지 않을 때
• [Android]WebView 팝업 처리

---

• Web API 설명집, MDN web docs

​