ECMAScript는 JavaScript의 핵심이지만 웹에서 JavaScript를 사용할 때 BOM (Browser Object Model)이 실제 핵심입니다.
BOM의 핵심 객체는 브라우저의 인스턴스를 나타내는 창입니다.
브라우저에서 Window 객체는 브라우저 창에 액세스하기위한 JavaScript의 인터페이스 및 ecmascript에서 지정된 전역 객체입니다. 즉, 웹 페이지에 정의 된 변수, 객체 및 기능은 창을 전역 객체로 취합니다.
1. 글로벌 범위
창 객체는 전역 객체의 역할을 수행하기 때문에 글로벌 범위에서 선언 된 모든 객체, 변수 및 함수는 창의 속성 및 방법이됩니다.
글로벌 변수 정의와 창 객체에서 속성을 정의하는 것에는 여전히 차이가 있습니다. 삭제를 통해 전역 변수를 삭제할 수없고 창 객체에 정의 된 속성은 괜찮습니다.
var age = 28; window.color = "빨간색"; // IE <9에서 오류가 발생하고 False Delete Window.age는 다른 브라우저에서 반환됩니다. // IE <9에서 오류가 발생하고 True Delete Window.color가 다른 브라우저에서 반환됩니다. // True Alert (Window.age)를 반환합니다. // 28 경고 (Window.Color); //한정되지 않은
var 문을 사용하여 창 속성을 추가 할 때 [[configurable]]이라는 속성이 있습니다. 이 속성의 값은 False로 설정되므로 이러한 방식으로 정의 된 속성은 삭제로 삭제할 수 없습니다.
선언되지 않은 변수에 액세스하려고 할 때 오류가 발생하지만 Window 개체를 쿼리하면 선언되지 않은 변수가 존재하는지 알 수 있습니다.
// OldValue가 var newValue = OldValue를 선언하지 않기 때문에 오류가 여기에 발생합니다. // 속성 쿼리 var var newValue = wind //한정되지 않은
실제로, 이치 및 내비게이션과 같은 많은 글로벌 JavaScript 객체는 실제로 창 객체의 속성입니다.
2. 창 관계 및 프레임 워크
페이지에 프레임이 포함 된 경우 각 프레임에는 자체 창 객체가 있으며 프레임 컬렉션에 저장됩니다.
프레임 컬렉션에서는 숫자 인덱스 또는 프레임 이름을 통해 액세스 할 수 있습니다.
<html> <head> <title> frameset 예제 </title> </title> </head> <frameset rows = "160,*"> <frame src = "frame.htm"name = "topframe"> <frameset cols = "50%, 50%"> <frame src = "exerframe.htm"name = "leftframe"> 이름 = "RightFrame"> </frameset> </frameset> </html>
이 예에서 위의 프레임 워크는 Window.frames [0] 또는 Window.frames [ "TopFrame"]에 의해 참조 될 수 있습니다. 그러나 프레임 워크에 액세스하기 위해 Top.frames [0]를 사용하는 것이 가장 좋습니다.
상단 객체는 항상 가장 높은 (외부) 레이어 프레임 워크, 즉 브라우저 창을 가리 킵니다. 그것을 사용하면 한 프레임에서 다른 프레임에 올바르게 액세스 할 수 있습니다.
상단 객체와 반대되는 또 다른 창 객체는 부모이며, 부모 객체는 항상 현재 프레임 워크의 직접 상단 프레임 워크를 가리 킵니다.
항상 창을 가리키는 자체 대상 도 있습니다. 실제로, 자기와 창은 서로 사용할 수 있습니다. 자체 개체를 소개하는 목적은 상단 및 부모 객체에만 해당하는 것입니다.
이 모든 객체는 창의 속성이며 Window.parent 또는 Window.top과 함께 사용할 수 있습니다.
3. 창 위치
대부분의 브라우저는 스크린 레프트 및 스크린 탑을 제공하며 화면의 왼쪽과 상단에 대한 창의 위치를 각각 나타냅니다. FF는 Screenx 및 Screeny 속성에 동일한 창 정보를 제공하며 Safari 양은 동시에이 두 속성을 지원합니다.
다음 코드를 사용하여 브라우저를 가로 질러 창의 왼쪽 및 상단 위치를 가져옵니다.
var leftpos = (typeof swooin var toppos = (typeof window.screentop == "number")? window.screentop : window.screeny;
IE 및 Opera, Screenleft 및 Screentop에서 화면의 왼쪽과 상단에서 창 객체로 표시되는 페이지의 가시 영역까지의 거리를 저장한다는 점은 주목할 가치가 있습니다. Chrome, FF 및 Safari에서 Screeny 및 Screentop에서 전체 브라우저의 좌표 값을 화면에 저장합니다.
최종 결과는 창의 왼쪽과 상단의 정확한 좌표 값을 크로스 브라우저 조건에서 얻을 수 없다는 것입니다.
moveto () 및 moveBy () 메소드를 사용하면 창을 새 위치로 정확하게 이동할 수 있습니다. 두 방법 모두 두 가지 매개 변수를받습니다. Moveto ()는 x 및 y 축의 좌표를 수신하고 MoveBy ()는 움직이는 픽셀을 수신합니다.
// 화면을 왼쪽 상단으로 이동 (0,0); // 남은 창을 50px moveby (-50,0)로 이동합니다.
그러나이 두 가지 방법은 브라우저에서 비활성화 될 수 있습니다. 이 두 가지 방법은 가장 바깥 쪽 창 객체에만 적용 가능하며 프레임 워크에 적용 할 수 없습니다.
4. 창 크기
주류 브라우저는 윈도우 크기를 결정하기위한 4 개의 속성을 제공합니다 : 내부, 내부, 외부면 및 외부 하이트.
IE9+, SAFARI 및 FF에서, 외피 및 OUTERHIGH는 브라우저 창 자체의 크기를 반환하지만 (프레임 워크의 액세스에 관계없이) 오페라에서는이 두 속성의 값은 페이지 뷰 컨테이너의 크기 (단일 탭 창의 크기)를 나타냅니다. Innerwidth와 InnerHight는 컨테이너의 페이지보기 크기를 나타냅니다 (테두리 너비를 제외). 그러나 Chrome 에서이 4 가지 속성은 모두 브라우저 크기가 아닌 뷰포트 크기를 나타냅니다.
IE9는 이전에 브라우저 창 크기를 얻기위한 속성을 제공하지 않았습니다. 그러나 DOM을 통해 페이지의 시각적 영역에 대한 정보를 제공합니다.
IE, FF, Chrome, Opera 및 Safari에서 페이지 뷰포트 정보는 Document.DocumentElement.clientWidth 및 Document.DocumentElement.clientHight에 저장됩니다. IE6에서는 표준 모드에서 효과적이어야합니다. 무차별 모드 인 경우 문서를 통해 동일한 정보를 얻어야합니다. 크롬은 표준 모드 나 혼합 모드를 구별하지 않습니다.
브라우저 창 자체의 크기는 결국 결정할 수는 없지만 페이지 뷰포트의 크기를 얻을 수 있습니다.
var pagewidth = window.innerWidth, pageHeight = wind if (pageWidth! = "number") {if (document.comPatMode == "css1compat") {pagewidth = document.documentElement.clientWidth; pageheight = document.documentElement.clientHeight; } else {pagewidth = document.body.clientWidth; pageheight = document.body.clientHeight; }} alert ( "너비 :" + pagewidth); 경고 ( "높이 :" + pageHeight);모바일 장치의 경우 Window.innerWidth 및 Window.innerHight가 화면의 페이지 영역 크기 인 가시 뷰포트를 고정합니다. Mobile IE 브라우저는 Document.DocumentElement.clientWidth 및 Document.DocumentElement.clientHight를 통해 동일한 정보를 얻어야합니다.
Resizeto () 및 resizeby () 메소드는 모두 브라우저 창의 크기를 조정하는 데 사용될 수 있습니다. 두 방법 모두 두 가지 매개 변수를받습니다. Resizeto ()는 브라우저 창의 새로운 너비와 새로운 높이를 수신하고 resizeby ()는 새 창과 이전 창 사이의 너비 차이와 높이 차이를받습니다.
// 100*100 Resizeto (100,100)로 조정; // 200*150 MoveBy (100,50)로 조정;
그러나이 두 가지 방법은 브라우저에서 비활성화 될 수 있습니다. 이 두 가지 방법은 가장 바깥 쪽 창 객체에만 적용 가능하며 프레임 워크에 적용 할 수 없습니다.
5. Windows를 탐색하고 열 수 있습니다
Window.open () 메소드는 특정 URL 또는 새 브라우저 창을 열 수 있습니다. 이 메소드는 4 개의 매개 변수를 수신합니다 : URL, Window Target, 기능 문자열 및 새 페이지가 현재 페이지를 대체하는지 여부를 나타내는 부울 값.
팝업
다양한 매개 변수
그중에서도 예/아니오도 1/0을 사용할 수 있습니다. PixelValue는 특정 값, 단위 픽셀입니다.
매개 변수 | 값 범위 | 설명
항상 낮아졌습니다 | 예/아니오 | 창 지정은 모든 창문 뒤에 숨겨져 있습니다
항상 분리되어 | 예/아니오 | 모든 창에 매달린 창을 지정하십시오
의존 | 예/아니오 | 부모 창이 동시에 닫혀 있는지 여부
디렉토리 | 예/아니오 | NAV2 및 3의 디렉토리 열이 보이나요?
높이 | PixelValue | 창 높이
핫키 | 예/아니오 | 메뉴 막대가없는 창에서 안전한 종료 핫키를 설정하십시오
내부 | pixelvalue | 창에 문서의 픽셀 높이
InnerWidth | pixelValue | 창에서 문서의 pixelwidth
위치 | 예/아니오 | 위치 막대가 보이나요?
Menubar | 예/아니오 | 메뉴 표시 줄이 보이나요?
OUTERHEIGHT | PIXELVALUE | 창의 픽셀 높이 설정 (장식 테두리 포함)
outerwidth | pixelvalue | 창의 픽셀 너비 설정 (장식 테두리 포함)
RESIZIZABLE | 예/아니오 | 창 크기가 조정 가능합니까?
screenx | pixelValue | 화면의 왼쪽 테두리에 창의 픽셀 길이
Screeny | PixelValue | 화면 상단 경계까지의 창의 길이
스크롤 바 | 예/아니오 | 창에 스크롤 바가 있는지 여부
TitleBar | 예/아니오 | 창 제목 열이 보이나요?
도구 모음 | 예/아니오 | 창 도구 모음이 보이나요?
너비 | pixelValue | 창 픽셀 너비
Z-LOOK | 예/아니오 | 창이 활성화 된 후 다른 창에 부유한지 여부
예:
st
스크립트가 실행되면 Page.html은 새로운 형태의 Newwindow로 열리며, 폭 100, 화면 상단에서 높이가 400, 화면 왼쪽에서 0 픽셀, 도구 모음, 메뉴 막대, 스크롤 막대, 주소 막대가 없으며 상태 막대가 없습니다.
6. 간헐적 인 통화 및 시간 초과 통화
JavaScript는 단일 스레드 언어이지만 타임 아웃 값과 간격 시간을 설정하여 특정 순간에 예약 코드 실행을 허용합니다. 전자는 지정된 시간 후에 코드를 실행하는 반면 후자는 지정된 각 시간에 대해 한 번 호출됩니다.
시간 초과 호출 settimeout ()
settimeout () 메소드는 두 개의 매개 변수를 허용하며, 첫 번째 매개 변수는 함수이며, 두 번째 매개 변수는 시간 (마이크로 초 단위)이며 숫자 ID를 반환합니다.
settimeout (function () {alert ( "hello!");}, 1000);settimeout ()을 호출 한 후 메소드는 시간 초과 호출을 나타내는 숫자 ID를 반환하고 타임 아웃 호출을 취소 할 수 있습니다.
var timeoutid = settimeout (function () {alert ( "hello!");}, 1000); 클리어 타임 아웃 (timeoutid);간헐적 통화 setInterval ()
setInterVal () 메소드는 두 개의 매개 변수를 허용하고, 첫 번째 매개 변수는 함수이고, 두 번째 매개 변수는 시간 (단위 마이크로 초)이며 숫자 ID를 반환합니다.
setInterVal (function () {alert ( "hello!");}, 1000);ClearInterVal ()에 대한 호출을 취소하고 매개 변수 간헐적 호출 ID를 수락합니다.
var intervalid = null; var span = document.createelement ( "span"); // SPAN 노드 Span.id = "Time"을 작성합니다. // SPAN ID 문서를 설정합니다. // SPAN 함수 추가 lecrementNumber () {var now = new Date (); var timest = now.tolocaletimestring (); span.innertext = timest; Num ++; if (num == 10) {clearInterval (IntervalId); // 시간은 10 초 후에 변경되지 않은 상태로 유지}} intervalid = setInterval (incrementNumber, 1000);간헐적 인 통화 대신 시간 초과 통화를 사용하십시오
var num = 0; var max = 10; 함수 ycrementNumber () {num ++; if (num <max) {settimeout (incrementnumber, 1000); } else {alert ( "ok"); }} settimeout (excrementNumber, 1000);7. 시스템 대화 상자
경고 상자 알림 ()
경고 ( "환영합니다!");
정보 상자 확인 ()에 취소 버튼이 있습니다
if (확인 ( "동의합니까?")) {alert ( "동의"); } else {alert ( "동의"); }프롬프트 (), 사용자가 일부 텍스트를 입력하라고 프롬프트합니다
var result = prompt ( "당신은 성을 존중합니까?", ""); if (result! == null) {alert ( "환영," +결과); }JavaScript에서 BOM (창 객체)에 대한 위의 자세한 설명은 편집기가 공유하는 모든 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.