window.open()란?[1]
javascript에서 새창을 여는 window객체의 함수
대부분 새창으로 팝업을 만들 때 사용
window.open('팝업주소', '팝업창 이름', '팝업창 설정');팝업설정 옵션
값은 yes 또는 no 로 지정.
toolbar = 상단 도구창 출력 여부
menubar = 상단 메뉴 출력 여부
location = 메뉴아이콘 출력 여부
directories = 제목 표시줄 출력 여부
status = 하단의 상태바 출력 여부
scrollbars = 스크롤바 사용 여부
resizable = 팝업창의 사이즈 변경 가능 여부
fullscreen = 전체화면으로 할지 선택 여부팝업설정 사이즈 정의
width = 팝업창의 가로 길이 설정
height = 팝업창의 세로 길이 설정
top = 팝업창이 뜨는 위치(화면 위에서부터의 거리 지정)
left = 팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정)
WebView에서 window.open()을 사용하여 팝업 생성
- URL을 입력받아 해당 URL을 팝업으로 띄운다.
testHTML.html [2]
- URL을 입력받을 textbox를 생성
- 버튼 클릭시 textbox의 주소로 window.open() 실행
* WebView 기본 구성은 이전 글참고<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> </head> <body> <h1>testHTML입니다</h1> <h2>WebView 실행중</h2> <input type="text" value="naver.com" id="setUrl"> <input type="submit" value="openWindow" onClick="windowOpen(setUrl.value)"/> <script type="text/javascript"> function windowOpen(myUrl) { // http://나 https://가 안붙여져 있으면 붙여줌 if(myUrl.indexOf("http://")==-1 && myUrl.indexOf("https://")==-1){ myUrl = "https://" + myUrl } var popOption = "top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=yes"; window.open(myUrl, popOption); } </script> </body> </html>
activity_main.xml
- WebView 레이아웃
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
MainActivity.java
- MainActivity
- 기본 WebView 세팅public class MainActivity extends AppCompatActivity { private WebView myWebView; private WebView myWebViewPop; // 팝업에 쓰일 웹뷰 private String myUrl = "file:///android_asset/testHTML.html"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // findViewById myWebView = (WebView) findViewById(R.id.webView); // 웹 URL 설정 myWebView.loadUrl(myUrl); // 어플 내 웹 띄우기 myWebView.setWebViewClient(new WebViewClient()); // 디버깅 허용 myWebView.setWebContentsDebuggingEnabled(true); // WebSettings WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true); // javascript를 사용할 경우 다음과 같이 설정 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 자바스크립트가 window.open()을 사용가능 webSettings.setSupportMultipleWindows(true); // 다중 윈도우 허용(팝업을 위해 추가) /* 팝업을 새로운 WebView에서 띄우기 위해 WebChromeClient을 커스텀한 MyWebChromeClient 추가 */ myWebView.setWebChromeClient(new MyWebChromeClient(this)); // 뒤로가기 설정 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) { myWebView.goBack(); return true; } return super.onKeyDown(keyCode, event); } }
- MyWebChromeClient [3]
- WebChromeClient를 수정하여 dialog형식으로 webview를 띄움
# 뒤로가기가 두번씩 눌리는 현상
-> onKey의 경우 버튼 클릭시 ACTION_DOWN(버튼이 눌릴때)과 ACTION_UP(버튼이 눌렸다 올라올 때) 이벤트가 발생.
-> ACTION_DOWN 조건을 추가하여 해당 부분 해결// 뒤로가기 버튼 유무와 ACTION_DOWN일 경우 if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN) { }
private class MyWebChromeClient extends WebChromeClient { private Activity mActivity = null; public MyWebChromeClient(Activity activity) { this.mActivity = activity; } // onCreateWindow() Overriding을 통해 새로운 WebView를 dialog형식으로 띄우도록 설정 @Override public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) { myWebViewPop = new WebView(view.getContext()); WebSettings webSettings = myWebViewPop.getSettings(); webSettings.setJavaScriptEnabled(true); myWebViewPop.setWebViewClient(new WebViewClient()); final Dialog dialog = new Dialog(view.getContext()); dialog.setContentView(myWebViewPop); ViewGroup.LayoutParams params = dialog.getWindow().getAttributes(); params.width = ViewGroup.LayoutParams.MATCH_PARENT; params.height = ViewGroup.LayoutParams.MATCH_PARENT; dialog.getWindow().setAttributes((WindowManager.LayoutParams) params); dialog.show(); /* 현재 팝업창에서 뒤로가기 버튼 클릭 시 뒤로가기가 두번씩 눌리는 현상 발생. 해당 부분 확인하여 수정 예정 해결) - onKey의 경우 버튼 클릭시 ACTION_DOWN(버튼이 눌릴때)과 ACTION_UP(버튼이 눌렸다 올라올 때) 이벤트가 발생. -> 조건에 뒤로가기 버튼 유무와 ACTION_DOWN일 경우만 추가하여 해당 부분 해결 */ // 뒤로가기 dialog.setOnKeyListener(new DialogInterface.OnKeyListener() { @Override public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN) { // 뒤로가기 버튼 유무와 ACTION_DOWN일 경우 if (myWebViewPop.canGoBack()) { myWebViewPop.goBack(); } else { dialog.dismiss(); myWebViewPop.destroy(); } return true; } else { return false; } } }); myWebViewPop.setWebChromeClient(new WebChromeClient() { @Override public void onCloseWindow(WebView window) { dialog.dismiss(); window.destroy(); } }); ((WebView.WebViewTransport) resultMsg.obj).setWebView(myWebViewPop); resultMsg.sendToTarget(); return true; } }
실행화면
-
다음과 같이 textbox에 URL을 입력 후 'openWindow' 버튼을 누르면
-
해당 URL 페이지가 팝업으로 뜨는 것을 확인할 수 있다.
참고
[1] https://kcmschool.com/63
[2] https://roundfigure.tistory.com/30
[3] https://blog.naver.com/PostView.nhn?blogId=dla210&logNo=221657051563&parentCategoryNo=&categoryNo=30&viewDate=&isShowPopularPosts=false&from=postView
[4] https://helloit.tistory.com/303코드 : https://github.com/jybyun9533/Android_Study/tree/master/WebView03
