메뉴 건너뛰기

조회 수 7297 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

// 데스크톱에 뛰운 브라우저 창의 전체크기

var windowWidth = window.outerWidth;

var windowHeight = window.outerHeight;

 

//Internet Explorer 8, 7, 6, 5, 은 

//outerWidth, outerHeight프로퍼티들이 지원되지 않음. 비슷한 기능이 없는걸로 확인.

 

 

// 데스크톱에 뛰운 브라우저 창의 위치 ( 파이어폭스, 사파리, IE10+, 크롬 )

var windowX = window.screenX;

var windowY = window.screenY;

 

//For Internet Explorer 8, 7, 6, 5, 사파리, IE8이하버전, 오페라

var windowX = window.screenLeft;

var windowY = window.screenTop; 

 

// HTMl문서가 표시되는 화상 표시 영역인 뷰포트(viewport)의 크기

// 이것은 브라우저 창 크기에서 메뉴, 툴바, 스크롤바 등의 크기를 뺀 나머지

var viewportWidth = window.innerWidth;

var viewportHeight = window.innerHeight;

 

//For Internet Explorer 8, 7, 6, 5:​ 

var viewportWidth​ = document.documentElement.clientWidth

var viewportHeight​ = document.documentElement.clientHeight

//or

var viewportWidth​ =​ document.body.clientWidth

var viewportHeight =​ document.body.clientHeight

 

 

// 수평, 수직 스크롤바의 위치를 표시

// 문서 좌표와 창 좌표를 상호 변환하는데 사용.

// 이값들은 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타냄

var horizontalScroll = window.pageXOffset;

var verticalScroll = window.pageYOffset;

 

//For Internet Explorer 8, 7, 6, 5:​ 

var horizontalScroll ​ = document.documentElement.scrollLeft

var verticalScroll ​ = document.documentElement.scrollTop

//or

var viewportWidth​ =​ document.body.scrollLeft

var viewportHeight =​ document.body.scrollTop 

 

 

 

※ 위에서 살펴본 프로퍼티는 읽기전용 프로퍼티임.

 

화면 좌표(screen coordinates)는 데스크톱 상에서 브라우저 창이 떠 있는 곳의 위치를 나타내며 데스크톱의 좌측 상단 모서리에서 상대적으로 계산

창 좌표(window coordinates)는 웹 브라우저의 뷰포트(viewport, 화상표시 영역) 안의 위치를 나타내며 뷰포트의 좌측 상단 모서리에서 상대적으로 계산

문서 좌표(document coordinates)는 HTML문서 안의 위치를 나타내며 문서의 좌측 상단 모서리에서 상대적으로 계산

 

 

인터넷 익스플로러(For Internet Explorer 8, 7, 6, 5) 는 이런 창 위치와 크기에 관련 프로퍼티들을 HTML 문서의 <body> 부분에 두었다.

더 혼란스러운 것은, IE 6에서 <!DOCTYPE> 선언부가 있는 문서를 출력할때 이 프로퍼티들을 document.body 대시 document.documentElement 엘리먼트에 둔다는 것이다.

 

다행이도 IE 9버전이상에서는 창 위치와 크기에 관련 프로퍼티​들이 Window객체를 통해 지원한다.

 

 

다음으로 살펴볼 코드는 

IE6도 포함하여 브라우저의 종류에 상관없이 뷰포트의 크기와 스크롤바의 위치, 그리고 화면위치를 알애내기 위한 메서드들을 가진 

Geometry객체를 정의한것이다.

 

 


 [코드] Geometry.js

Colored By Color Scripter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/** 
 * 브라우저 종류에 관계없이 창 위치와 크기 알아내기
 * Geometry.js:  창, 문서의 위치와 크기를 알기 위한 이식 가능한 함수들.
 * 
 * 이 모듈은 창, 문서의 위치와 크기를 알기 위한 함수들을 정의한다.
 * 
 * getWindowX/Y()  : 화면 상에서 브라우저 창이 뜨워진 위치를 반환.
 * getViewportWindth/Height() : 브라우저 뷰포트 영역의 크기를 반환.
 * getDocumentWidth/Height() : 문서의 크기를 반환.
 * getHorizontalScroll() : 수평 스크롤바의 위치를 반환.
 * getVerticalScroll() : 수직 스크롤바위 위치를 반환.
 * 
 * 브라우저의 종류에 상관없이 브라우저 창의 크기를 반환하기 위한 방법은 존재하지 않는다.
 * (IE8이하버전들) 따라서 getWindowWidth/Height() 함수가 빠져있음을 주의하라.
 */


var Geometry = {};

//데스크톱에 띄운 브라우저 창의 위치
if (window.screenLeft) { // IE 등의 브라우저에서는
    Geometry.getWindowX = function() { return window.screenLeft; };
    Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screenX) { // 파이어폭스 등의 브라우저에서는
    Geometry.getWindowX = function() { return window.screenX; };
    Geometry.getWindowY = function() { return window.screenY; };
}


if(window.innerWidth) { //IE를 제외한 모든 브라우저에서는
    Geometry.getViewportWidth = function() { return window.innerWidth; };
    Geometry.getViewportHeight = function() { return window.innerHeight; };
    Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
    Geometry.getVerticalScroll = function() { return window.pageYOffset; };
} else if (document.documentElement && document.documentElement.clientWidth) {
    // 이들 함수는 DOCTYPE이 존재할때의 IE6을 위한것.
    Geometry.getViewportWidth = 
        function() { return document.documentElement.clientWidth; };
    Geometry.getViewportHeight = 
        function() { return document.documentElement.clientHeight; };
    Geometry.getHorizontalScroll = 
        function() { return document.documentElement.scrollLeft; };
    Geometry.getVerticalScroll =
        function() { return document.documentElement.scrollTop; };

} else if (document.body.clientWidth) {
    // DOCTYPE 이 없을때의 IE 6을 위한것
    Geometry.getViewportWidth = 
        function() { return document.body.clientWidth; };
    Geometry.getViewportHeight = 
        function() { return document.body.clientHeight; };
    Geometry.getHorizontalScroll = 
        function() { return document.body.scrollLeft; };
    Geometry.getVerticalScroll =
        function() { return document.body.scrollTop; };
}

//문서의 전체 크기를 반환
if(document.documentElement && document.documentElement.scrollWidth) {
    Geometry.getDocumentWidth =
        function() { return document.documentElement.scrollWidth; };
    Geometry.getDocumentHeight = 
        function() { return document.documentElement.scrollHeight; };
} else if (doxument.body.scrollWidth) {
    Geometry.getDocumentWidth =
        function() { return document.body.scrollWidth; };
    Geometry.getDocumentHeight = 
        function() { return document.body.scrollHeight; };
}

 

 

[속성 설명]

int scrollHeight, scrollWidth

엘리먼트의 전체높이와 폭을 픽셀 단위로 나타낸다. 

엘리먼트에 스크롤바가 있으면(예를 들어 CSS overflow 속성때문에) 이 프로퍼티의 값은 엘리먼트가 화면에 보이는 부븐의 크기를 알려주는 offsetHeight나 offsetWidth프로퍼티의 값과 다르다. 비표준 프로퍼티이긴 하지만 잘 지원된다.  

 

 [코드] GeometryExam.html

Colored By Color Scripter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>브라우저 종류에 관계없이 창 위치와 크기 알아내기</title>
  <script type="text/javascript" src="Geometry.js"></script>
  <script>
    document.write("Geometry.getWindowX():"+Geometry.getWindowX()+"<br/>");
    document.write("Geometry.getWindowY():"+Geometry.getWindowY()+"<br/>");
    document.write("Geometry.getViewportWidth():"+Geometry.getViewportWidth()+"<br/>");
    document.write("Geometry.getViewportHeight():"+Geometry.getViewportHeight()+"<br/>");
    document.write("Geometry.getDocumentWidth():"+Geometry.getDocumentWidth()+"<br/>");
    document.write("Geometry.getDocumentHeight():"+Geometry.getDocumentHeight()+"<br/>");
    document.write("Geometry.getHorizontalScroll():"+Geometry.getHorizontalScroll()+"<br/>");
    document.write("Geometry.getVerticalScroll():"+Geometry.getVerticalScroll()+"<br/>");

  </script>
 </head>
 <body>
 </body>
</html>

 


 

 

 

 [코드] HTML 문서가 표시되는 뷰포트(viewport)의 크기 정보를 가지고 있는 객체를 반환하는 함수 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Return the viewport size as w and h properties of an object
function getViewportSize(w) {
    // Use the specified window or the current window if no argument
    w = w || window;  

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return {w: w.innerWidth, h:w.innerHeight};

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")        return { w: d.documentElement.clientWidth,
                 h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientWidth };
}

 

 

  

 [코드] 수평, 수직 스크롤바의 위치의 정보를 가지고 있는 객체를 반환하는 함수

Colored By Color Scripter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Return the current scrollbar offsets as the x and y properties of an object
function getScrollOffsets(w) {
    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE versions 8 and before
    if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset};

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop};

    // For browsers in Quirks mode
    return { x: d.body.scrollLeft, y: d.body.scrollTop };
}

 

 

 


List of Articles
번호 제목 날짜 조회 수
227 텍스트박스 입력제한(숫자,영문,한글,특수기호) 2019.01.16 1991
226 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 2789
225 클릭위치로 레이어 띄우기 2014.03.01 6220
224 쿠키(Cookie)에 값 저장하기 2016.09.21 6952
223 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 2912
222 체크박스 체크하면 레이어 보여주기. 체크안하면 알려주기 2014.03.01 7458
221 체크박스 전체 선택 및 해제, 반드시 1개 이상 선택 강제 2019.01.16 1308
» 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 7297
219 창 크기 최대화 시키기 file 2015.06.19 12217
218 차단된 팝업창을 허용하라는 스크립트 2014.02.27 6751
217 지정한 크기로 링크페이지 새창열기 2014.03.01 5455
216 지금 보고 있는 웹페이지 창을 닫으려고 합니다." 안나타나게 하기 2014.02.27 7183
215 주민번호 입력시 생일 자동입력 file 2014.03.01 5621
214 주민등록번호로 성별/나이/연령대 구분 2014.03.01 8794
213 주민등록번호 체크 file 2014.03.01 5908
212 제목에 한글 영문 숫자 와 공란만 입력하게 하고 싶습니다. 2014.03.01 6461
211 정규식을 이용한 콤마(comma) 제거하기 2015.06.19 6804
210 정규식을 이용한 실시간 콤마(comma) 넣기 2015.06.19 7876
209 접근성 윈도우 팝업 띄우기 2016.12.22 7114
208 적용이 간편한 [글목록 인쇄] 등 특정 영역 인쇄하기 팁 2014.02.27 5441
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved