투케이2K

46. (javascript/자바스크립트) 브라우저 사이즈, 해상도 구하기 및 window open 윈도우 창 열기 실시 본문

JavaScript

46. (javascript/자바스크립트) 브라우저 사이즈, 해상도 구하기 및 window open 윈도우 창 열기 실시

투케이2K 2021. 6. 10. 15:10

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

<script> /* [요약 설명] 1. browserWidth : 브라우저 바디 영역 크기를 구합니다 2. screenWidth : 브라우저 해상도 값을 구합니다 3. window.open : 윈도우 창을 호출합니다 */ /* 이벤트 함수 정의 */ function main(){ console.log("[main] : [start]"); /* 버전별 예외 상황 회피 : 브라우저 가로, 세로 크기 구하기 */ var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var browserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; /* 브라우저 해상도 구하기 */ var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; /* 결과 출력 실시 */ console.log("[main] : [browserWidth] : " + browserWidth); console.log("[main] : [browserHeight] : " + browserHeight); console.log("[main] : [screenWidth] : " + screenWidth); console.log("[main] : [screenHeight] : " + screenHeight); /* 윈도우 창 열기 실시 */ var windowUrl = "https://www.naver.com"; var windowName = "_blank"; // _blank : 새창 기본 / _parent : 부모에 포함됨 / _self : 현재 페이지 대체 / _top : 로드된 프레임셋 대체 var windowWidth = browserWidth / 2; var windowHeight = browserHeight / 2; var windowTop = 100; var windowLeft = 100; var windowFullScreen = "no"; // yes var windowUrlUse = "no"; //yes var windowMenuUse = "no"; //yes var windowScrollUse = "yes"; //no var windowStateUse = "no"; //yes var windowTittleUse = "no"; //yes var windowToolbarUse = "no"; //yes var windowResize = "yes"; //no var windowHistory = true; // true : 현재 히스토리를 대체 / false : 히스토리에 새 항목 var formatOption = ""; formatOption = formatOption + "width=" + windowWidth + ","; formatOption = formatOption + "height=" + windowHeight + ","; formatOption = formatOption + "toolbar=" + windowToolbarUse + ","; formatOption = formatOption + "scrollbars=" + windowScrollUse + ","; formatOption = formatOption + "resizable=" + windowResize + ","; formatOption = formatOption + "top=" + windowTop + ","; formatOption = formatOption + "left=" + windowLeft + ","; formatOption = formatOption + "replace=" + windowHistory + ","; formatOption = formatOption + "channelmode=" + windowFullScreen + ","; formatOption = formatOption + "status=" + windowStateUse + ","; formatOption = formatOption + "location=" + windowUrlUse + ","; formatOption = formatOption + "menubar=" + windowMenuUse + ","; formatOption = formatOption + "titlebar=" + windowTittleUse + ","; formatOption = formatOption + "toolbar=" + windowToolbarUse; console.log("[main] : [windowUrl] : " + windowUrl); console.log("[main] : [windowName] : " + windowName); console.log("[main] : [windowOption] : " + formatOption); window.open(windowUrl, windowName, formatOption); //윈도우 창 오픈 실시 }; </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. browserWidth : 브라우저 바디 영역 크기를 구합니다

2. screenWidth : 브라우저 해상도 값을 구합니다

3. window.open : 윈도우 창을 호출합니다

*/

/* =========================== */

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

48. (javascript/자바스크립트) location 사용해 url , port , host 정보 출력 및 새로운 페이지 링크 이동 (href , replace) 실시  (0) 2021.06.11
47. (javascript/자바스크립트) body 클릭 이벤트 감지, 동적 div 레이아웃 생성 및 클릭 이벤트 확인 - document body onclick  (0) 2021.06.10
45. (javascript/자바스크립트) 쿼리 셀렉터 document querySelectorAll, querySelector 사용해 특정 태그 정보 확인 및 스타일 속성 변경  (0) 2021.06.10
44. (javascript/자바스크립트) childNodes 자식 노드, parentNode 부모 노드, nextSibling 형제 노드 정보 확인  (0) 2021.06.10
43. (javascript/자바스크립트) window ready, window onload 구현 및 코드 차이점 설명  (0) 2021.06.09
'JavaScript' Related Articles more
Comments