Window loading 이벤트:
이벤트를 제외하고 창 크기 조정:
window .open() 메소드는 지정된 URL로 이동하거나 새 브라우저 창을 여는 데 사용할 수 있습니다.
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");타이머:
window.scroll(x, y)
window.scrollTo(x, y): 둘 다 가로 및 세로 위치를 변경하는 사용법은 동일합니다. 세로 스크롤 막대가 있어야 합니다. 스크롤 막대가 페이지에 있습니다.
window.scrollBy(x, y): 스크롤 막대의 누적 스크롤, 양수는 아래로, 음수는 위로 이동 window.scrollBy(0, 10) : 100밀리초마다 호출되면 스크롤 막대가 10픽셀씩 이동합니다.
window.getCompulatedStyle(elem, pseudo-class)
대화 상자
js 스크립트를 실행하고 js 코드를 동기 실행 모드로 실행 스택에 넣습니다. 실행 스택을 실행할 때 JS 비동기 코드(이벤트, 타이머, ajax, 리소스 로딩)가 발생합니다. , 오류)를 웹 API(작업 큐)에 넣습니다. 실행 스택의 코드가 완료되면 작업 큐로 이동하여 실행을 위해 첫 번째 코드를 가져오고, 작업 큐에서 하나를 가져와 실행합니다. 작업 대기열의 실행이 완료될 때까지 반복적으로(이벤트 루프) 실행합니다.
window.history는 현재 페이지의 주소 URL을 가져오고 브라우저를 새 페이지로 리디렉션하는 데 사용됩니다.
http://www.itcast.cn:80/index.html?name=andy&age=1#link http: 통신 프로토콜 www.itcast.cn: 도메인 이름 80: 포트 index.html: path?name=andy&age=1: 매개변수 #link 조각: 앵커 포인트, 링크
개체 속성:
현재 URL의
navigator: 브라우저 구성 정보를 캡슐화하는 개체
. window.history 객체에는 브라우저의 기록(url) 컬렉션이 포함됩니다
window.screen객체는 사용자에 대한 정보를 포함합니다. 
// screen: 디스플레이 장치의 해상도 크기를 가져옵니다. // 전체 해상도: screen.widht/height // 모든 클라이언트 너비와 호환되는 클라이언트 유형을 식별하는 방법 // 대형 화면, 중형 화면, 소형 화면, 초소형 화면 // lg md sm xs // TV PC 패드폰 //너비 >= 1200 >=992 >= 768 < 768 //작업 표시줄 제거 후 남은 해상도 // screen.availHeight/availWidth
요소의 위치(오프셋), 크기 등을 동적으로 가져올 수 있습니다.
오프셋 계열의 일반적으로 사용되는 속성:
요소의 테두리 크기 및 요소 크기와 같은
공통 속성을
동적으로 가져옵니다.요소의 크기 및 스크롤 거리를 동적으로 가져옵니다.
공통 속성
. 스크롤할 때 onscroll 이벤트가 트리거됩니다.
window.pageXOffset/pageYOffset IE8 이하는 document.body/documentElement.scrollLeft/scrollTop 두 개의 값을 추가하는 것은 불가능하므로 시간이 오래 걸립니다. 두 값이 동시에 값을 가지려면 캡슐화 호환성 방법으로 스크롤 막대 휠의 롤링 거리를 찾습니다. getScrollOffet()
/*
스크롤 막대의 스크롤 거리를 가져오는 메서드를 캡슐화합니다. 반환값: x: 가로 스크롤 막대의 스크롤 거리 y: 세로 스크롤 막대의 스크롤 거리 */function getScrollOffet(){
if(window.pageXOffset){
객체의 return {//{}은 키워드 뒤에 와야 합니다. 그렇지 않으면 시스템이 자동으로 이를 추가하고 반환 값은 정의되지 않습니다.
x : window.pageXOffset,
y : window.pageYOffset }
}else{//IE8 이하와 호환됨 return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop }
}} window.innerWidth/innerHeight IE8 이하와 호환되지 않습니다. (참고: 여기의 너비와 높이는 메뉴 표시줄, 도구 모음, 스크롤 막대 등의 높이를 포함하지 않습니다.) document.documentElement.clientWidth/clientHeight 표준 모드의 document.documentElement.clientWidth/clientHeight , 모든 브라우저는 document.body.clientWidth/clientHeight 이상한 상황에 적합한 브라우저 캡슐화 호환 방법입니다. 브라우저 뷰포트 크기를 반환합니다. getViewportOffset()
/*Encapsulation은 브라우저 뷰포트 크기 반환 값을 반환합니다. :
w: 뷰포트 너비 h: 뷰포트 높이*/function getViewportOffset(){
if(window.innerWidth){
반품 {
w : window.innerWidth,
h : window.innerHeight }
}else{ //IE8 이하 브라우저와 호환 가능 if(document.compatMode == 'BackCompat'){
//이상한 렌더링 모드에서 {를 반환합니다.
w : document.body.clientWidth,
h : document.body.clientHeight }
}또 다른{
//표준 모드 return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode); // BackCompat 이상한 모드 // domElement.getBoundingClientRect() 에 대한 새로운 이해는 왼쪽을 포함하는 객체를 반환합니다. , 상단, 오른쪽, 하단과 같은 속성은 요소의 왼쪽 상단 모서리의 X 및 Y 좌표를 나타냅니다. 오른쪽 및 하단은 요소의 오른쪽 하단 모서리의 X 및 Y 좌표를 나타냅니다. width 속성은 이전 버전의 IE에서 구현되지 않습니다. 반환된 결과는 실시간이 아닙니다. '
// 문서에서 요소의 위치를 가져옵니다. function getElementPosition(target){
//BoundingClientRect() 메서드 지원 if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // 스크롤 막대가 움직일 때 스크롤 막대의 위치 x를 추가합니다: pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} 또 다른 {
변수 위치 = {
왼쪽: 0,
상단 : 0
}
var _elm = 대상;
while(target.offsetParent){
if(_elm == target){//처음으로 왼쪽과 위쪽을 누적합니다.
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}또 다른{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop;
}
// 타겟 재할당 target = target.offsetParent;
}
return { x : 위치왼쪽, y : 위치위쪽}
}} 상태 표시줄
창 위치를
일시적으로 변경합니다및 기타 속성