window.open()에 대한 자세한 설명 및 브라우저 호환성 문제_javascript 기술에 대한 논의

1. 기본 구문:
window.open(pageURL,name,parameters)
여기서:
pageURL은 하위 창의 경로입니다.
name은 하위 창의 이름입니다.
매개변수는 창 매개변수입니다(각 매개변수는 쉼표로 구분됨)

2. 예시

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

page.html은 새로운 형식입니다 newwindow 중앙에서 열기, 너비는 800, 높이는 500, 화면 상단에서 0픽셀, 화면 왼쪽에서 0픽셀,

아니요 도구 모음, 메뉴 표시줄 없음, 스크롤 막대 없음, 크기 조정 없음, 주소 표시줄 없음, 상태 표시줄 없음.

각 브라우저는 window.open()의 sFeatures 매개변수 창 기능을 서로 다르게 지원합니다.

각 브라우저의 실행 결과 요약:


위로 각 기능의 매개변수 옵션에 대한 각 브라우저의 지원 수준은 다음과 같습니다.

[참고 1]: IE7 IE8 Firefox Chrome Safari에서 "메뉴바" 옵션을 사용할 때 "yes"이면 메뉴 표시줄은 기본적으로 표시되지 않으며 ALT 키를 누른 후에만 메뉴 표시줄이 표시됩니다. 반대로 "menubar" 옵션이 "no"이면 메뉴 표시줄이 표시되지 않습니다. Alt 키를 눌러도 마찬가지입니다.
【참고 2】: Safari에서 "위치" 옵션을 켰을 때 표시 효과는 "도구 모음" 옵션을 켠 것과 동일합니다.
【참고 3】: IE6 IE8 Chrome에서는 "상단" 및 "왼쪽" 위치 지정을 사용합니다. 설정된 좌표 값이 너무 크면 팝업 창이 화면의 가시 범위를 벗어나 표시될 수 있습니다.
【참고 4】: IE7 Firefox Safari Opera에서는 "상단" 및 "왼쪽" 위치 지정을 사용합니다. 설정된 좌표 값이 너무 크면 창에서 자동으로 "상단" 및 "왼쪽" 값을 조정합니다. 창이 일반적으로 화면의 가시 영역 내에 표시되는지 확인하십시오.
【참고 5】: Chrome Opera에서는 "width"와 "height" 값을 설정하지 않고 "left"와 "top"을 독립적으로 사용하는 것을 지원하지 않습니다. 설정값은 모두 적용되지 않습니다.
【주석 6】: 크롬에서는 '왼쪽'과 '높이' 값을 설정하지 않고 '너비'와 '높이'를 독립적으로 사용하는 것을 지원하지 않습니다. 값은 둘 다 적용되지 않습니다. [주석 5]의 설명과 결합하면 크롬에서 팝업창의 너비, 높이, 위치 등의 값을 하나 또는 여러 개 설정하려면 모두 할당해야 하고, 그렇지 않으면 모두 할당해야 함을 알 수 있다. 작동하지 않습니다.
【주석 7】: Firefox Chrome에서는 주소 표시줄이 항상 표시됩니다.
【주석 8】: Opera에서는 기본적으로 주소 표시줄이 표시되지 않지만, 페이지 상단 표시줄을 클릭하여 표시할 수 있습니다. "location=yes" 설정 후 자동으로 주소 표시줄이 표시됩니다. .
【참고 9】: Chrome Opera에서는 "menubar" 값을 어떻게 설정하더라도 메뉴바가 표시되지 않습니다.
【주석 10】: Firefox Safari Chrome Opera에서 "크기 조정 가능" 값이 어떻게 설정되어 있더라도 창 크기는 항상 사용자가 조정할 수 있습니다.
【주석 11】: Safari Chrome에서 페이지에 스크롤 막대가 있는 경우 "scrollbars" 값을 어떻게 설정하더라도 스크롤 막대가 항상 표시됩니다.
【참고 12】: IE7은 Windows XP SP3 시스템에서 기본적으로 상태 표시줄을 숨기기 위해 "status" 매개변수를 지원할 수 있지만 Windows Vista 시스템의 기본 환경에서는 "status" 매개변수가 지원되지 않으며 상태 표시줄은 항상 표시됩니다. 이는 시스템의 기본 IE7 부 버전 번호가 다른 것과 일치합니다. 전자는 버전 번호가 낮고 후자는 버전 번호가 높습니다.
【주석 13】: Firefox에서는 "상태" 값을 어떻게 설정하더라도 상태 표시줄이 항상 표시되는 반면, Chrome Opera에서는 전자와 달리 상태 표시줄이 항상 표시되지 않습니다.
【주석 14】: Chrome Opera에서는 "toolbar" 값을 어떻게 설정하더라도 도구 모음이 표시되지 않습니다.
정리하자면, window.open 메소드의 sFeatures 매개변수 지원 수준에 큰 차이가 있음을 알 수 있으며, 사용 시 주의가 필요합니다.

일반적으로 window.open을 사용하여 페이지를 열 때 샘플 코드가 중앙에 표시되어야 합니다.

코드 복사 코드는 다음과 같습니다.

var width=800; //팝업창의 너비

var height=500; 팝업 창의
var top = (window.screen.availHeight- height)/2; //창의 수직 위치
var left = (window.screen.availWidth-width)/ 2; //창의 가로 위치
window.open('page.html', 'newwindow','height=' height ',width=' width ',top=' top ',left=' left ',
toolbar=no,menubar=no,scrollbars=no, resizing=no,location=no, status=no')


availHeight와 height의 차이

코드 복사 코드는 다음과 같습니다.

window.screen.width는 현재 화면 너비(해상도 값)를 반환합니다. )

window.screen.height는 현재 화면 높이(해상도 값)를 반환합니다
screen.availWidth,screen.availHeight 작업 표시줄(taskbar)을 제외한 길이와 너비를 나타냅니다