JavaScript에서 브라우저 Windows의 기본 작동 요약

창 위치

【1.

브라우저 (Firefox는 지원하지 않음)는 screenLeft 및 screenTop 특성을 제공하며,이 특성은 각각 화면의 왼쪽 및 상단에 대한 창의 위치를 나타냅니다.

창이 최대화되면 각 브라우저에서 반환 된 값은 다음 코드를 실행할 때 동일하지 않습니다. 크롬은 왼쪽으로 반환됩니다 : 0; 상단 : 0. 즉, 왼쪽 : 0; 상단 : 56 (메뉴 막대가있는 경우 왼쪽 : 0; 상단 : 78)을 반환합니다. 즉, 화면의 왼쪽과 상단에서 창 객체로 표시되는 페이지의 가시 영역까지의 거리를 저장하기 때문입니다. Safari는 왼쪽으로 돌아갑니다 : -8; 상단 : -8 자체 버그로 인해 -8

 // 창을 움직이면 <div id = 'mydiv'> </div> <cript> var timer = setInterval (function () {mydiv.innerhtml = 'left :' + wind

결과 : 왼쪽 : 0; 상단 : 93

screenX 및 screenY Properties (IE8-)는 동일한 창 위치 정보를 제공합니다.

[참고] screenLeft , screenTop , screenX 및 screenY 모두 읽기 전용 특성입니다. 값을 수정해도 창이 움직이지 않습니다.

창이 최대화되면 각 브라우저에서 반환 된 값은 여전히 다릅니다. Firefox는 왼쪽으로 돌아갑니다 : -7; 상단 : -7. 크롬은 여전히 왼쪽으로 돌아갑니다 : 0; 상단 : 0. IE9+는 항상 왼쪽으로 돌아갑니다 : -7; 상단 : -7 메뉴 막대가 표시되는지 여부에 관계없이 -7. Safari는 여전히 왼쪽으로 돌아옵니다 : -8; 상단 : -8 자체 버그로 인해 -8

 <div id = 'mydiv'> </div> <cript> var timer = setInterval (function () {mydiv.innerhtml = 'left :' + window.screenx + '; top :' + winde

결과 : 왼쪽 : 0; 상단 : 93

호환 가능

창 위치를 얻기위한 호환 된 쓰기 방법은 다음과 같습니다.

[참고] 각 브라우저의 구현이 다르기 때문에 크로스 브라우저 조건에서 정확한 좌표 값을 얻는 것은 불가능합니다.

 var leftpos = (typeof window.screenleft == "number")? Window.screenLeft : Window.ScreenX; var toppos = (typeof window.screentop == "number")? Window.screentop : Window.Screeny; Console.log (왼쪽, 탑);

【2. 모바일

moveTo() 및 moveBy() 메소드를 사용하여 창을 새 위치로 이동하십시오. 이 두 가지 방법은 IE 브라우저에서만 지원됩니다.

moveTo() 두 개의 매개 변수, 즉 새 위치의 x와 y 좌표 값을 수신합니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> // 창을 (0,0) mydiv.onclick = function () {window.moveto (0,100)로 이동합니다. } </스크립트>

moveBy() 두 개의 매개 변수, 즉 수평 및 수직 방향으로 움직이는 픽셀의 수를 수신합니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> // 창을 100 픽셀로 아래로 이동시킵니다. mydiv.onclick = function () {window.moveby (0,100); } </스크립트>

창 크기

【1.

outerWidth 및 outerHeight 속성은 브라우저 창 자체의 크기를 나타내는 데 사용됩니다.

[참고] IE8-Browser는 지원하지 않습니다

 // Chrome은 Outerwidth : 1920; OuterHeight : 1030 // IE9 + 및 Firefox exterwidth : 1550; OUTERHEIGHT : 838 // SAFARI를 반환합니다. Window.outerHeight : ' + Window.outerHeight

결과 : 외피 : 1440; 외부 : 743

innerWidth 및 innerHeight 속성은 페이지 크기를 나타내는 데 사용되며, 실제로 브라우저 창 크기와 동일합니다. 브라우저 자체 테두리 및 메뉴 막대, 주소 막대, 상태 막대 등의 너비를 뺀 것입니다.

[참고] <iframe> 자체에는 창 속성이 있으므로 페이지에 프레임이 있으면 프레임의 innerWidth 및 innerHeight 속성이 프레임 자체의 innerWidth 및 innerHeight 속성을 나타냅니다.

 // Chrome은 InnerWidth : 1920; 내부 하이드 : 971 // IE9+ 내부의 반환 : 1536; InnerHeight : 768 // firefox를 반환합니다 : 내부 : 내부 : 755 // Safari는 InnerWidth : 1536; InnerHeight. 'InnerWidth :' + winde

결과 : Innerwidth : 701; 내부 : 40

document.documentElement.clientWidth 및 document.documentElement.clientHeight 는 페이지 크기를 나타내며 innerWidth 및 innerHeight

[참고] 마찬가지로 프레임 워크에 액세스하면이 두 속성도 프레임 워크의 속성을 가리 킵니다.

 // chrome은 내부를 반환합니다 : 1920; 내부 : 971 // IE9+ 내부를 반환합니다 : 1536; InnerHeight : 768 // Firefox는 내부를 반환합니다 : 1536; 내부 : 755 // Safari는 내면을 반환합니다 : 1536; InnerHeight : 764 document.body.innerhtml = 'clientWidth :' + document.DocumentELement.ClientWidth + '; clientHeight :' + document.documentElement.ClientHeight

결과 : ClientWidth : 701; ClientHeight : 40

이 두 가지 유형의 속성은 컴퓨터에서 동일한 값을 나타내지 만 모바일 측면에서는 다른 용도가 있습니다. innerWidth 및 innerHeight 시각적 뷰포트, 즉 사용자가보고있는 웹 사이트의 영역을 나타냅니다. document.documentElement.clientWidth 및 clientHeight CSS 레이아웃의 크기를 참조하여 레이아웃 뷰포트를 나타냅니다.

【2 ment 조정

브라우저 창 크기를 조정하려면 resizeTo() 와 resizeBy() 의 두 가지 방법을 사용하십시오.

[참고] IE 및 Safari 브라우저 만 지원합니다

resizeTo() 두 가지 매개 변수를 수신합니다 : 브라우저 창의 새로운 너비와 새로운 높이

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> mydiv.onclick = function () {// 브라우저 창을 200,200 Window.Resizeto (200,200)로 크기를 조정합니다.} </script>

resizeBy() 두 가지 매개 변수를 수신합니다 : 브라우저의 새 창과 원래 창의 너비와 높이의 차이

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> mydiv.onclick = function () {// 브라우저 창 너비를 100 Window.Resizeby (-100,0);} </script>

창을 엽니 다

window.open() 메소드는 특정 URL로 이동하거나 새 브라우저 창을 열 수 있습니다. 이 메소드는로드 할 URL, 창 대상, 피처 스트링 및 새 페이지가 브라우저 기록에서 현재로드 된 페이지를 대체하는지 여부를 나타내는 부울 4 가지 매개 변수를 수신합니다.

매개 변수

【1 only 종종 첫 번째 매개 변수 만 전달하면됩니다. 새 창의 기본 개구부

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> mydiv.onclick = function () {window.open ( "http://baidu.com");} </script>

【2 second 두 번째 매개 변수는 기존 창 또는 프레임 워크의 이름 또는 _self, _parent, _top, _blank 등의 열기 메소드를 나타냅니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> // mydiv.onclick = function () {window.open ( "http://baidu.com", '_ self');} </script>

【3 third 세 번째 매개 변수는 쉼표로 구분 된 설정 문자열입니다. 새 창에 어떤 기능이 표시되는지 나타냅니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> mydiv.onclick = function () {// 높이가 500, 너비가 500, 0, 수평 좌표가 새로운 QQ 웹 페이지를 엽니 다. wind

[4] 네 번째 매개 변수는 두 번째 매개 변수가 존재하는 창을 지명 한 경우에만 유용합니다. 첫 번째 매개 변수로 지정된 URL이 창 브라우징 기록의 현재 항목 (TRUE)의 현재 항목을 대체하는지 여부를 선언하는 부울 값입니다.

반환 값

open() 메소드의 반환 값은 새 창의 창 객체입니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> mydiv.onclick = function () {var w = window.open (); w.document.body.innerhtml = '테스트 텍스트';} </script>

새로 생성 된 창 객체에는 오프너 속성이 있으며,이 속성을 열었습니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> mydiv.onclick = function () {var w = window.open (); console.log (w.opener === 창); // true} </script>

필터

대부분의 브라우저에는 팝업 필터링 시스템이 있습니다. 일반적으로 open() 메소드는 사용자가 버튼이나 링크를 수동으로 클릭 할 때만 호출됩니다. 브라우저가 처음로드 될 때 팝업 창을 열 때 자바 스크립트 코드가 실패합니다. 가로 채기하면 반환 값이 undefined

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> var w = wind

창문이 닫힙니다

Method open() 새 창을 열는 것처럼 Method close() 창을 닫습니다. Window 객체 w가 생성 된 경우 다음 코드를 사용하여 꺼질 수 있습니다.

 <div> <span id = "span1"> 열기 창 </span </span <span id = "span2"> 닫기 창 </span> </div> <cript> var w; span1.onclick = function () {w = wind }} </script>

새 창의 객체 w에는 closed 속성이 닫히는 지 여부를 감지합니다.

 <div id = "mydiv"> 여기를 클릭하십시오 </div> <cript> // false를 먼저 표시 한 다음 truemydiv.onclick = function () {var w = window.open (); console.log (w.closed); // false settimeout (function () {w.close (); console.log (w.closed); // true}, 1000); } </스크립트>

작은 응용 프로그램

window.open() 에 의해 반환 된 개체는 새로 열린 창의 개구부 및 닫기를 작동 할 수 있습니다.

 <div id = "mydiv"> 열기 창 </div> <cript> var w = null; mydiv.onclick = function () {// w가 존재하지 않는 경우, 즉 새 창이 열리지 않거나 새 창이 닫히지 않거나 (! w) {w = window.open ( "http://baidu.com", "_blank", "height = 400, width = 400, top = 10, 왼쪽 = 10"); mydiv.innerhtml = '닫기 창'; // w가 존재하면 새 창이 열렸다는 것을 의미합니다.} else {w.close (); w = null; mydiv.innerhtml = '열기 창'; }} </script>

요약

이 기사는 주로 JavaScript 브라우저 Windows의 기본 작업을 소개합니다. 이해하기가 매우 간단하지만 매우 실용적인 기능입니다. 모든 사람이 매일 자바 스크립트를 사용하는 데 도움이되기를 바랍니다.