JavaScript는 로봇 창 등과 같은 추가 작업을 수행하기 위해 브라우저 창을 열고 닫는 내장 메서드를 제공합니다. 이러한 메서드는 브라우저 창 팝업을 열거나 닫는 데 도움이 됩니다. 다음은 창 방법입니다.
그만큼 창문.열기 메소드는 새 웹 페이지를 새 창으로 여는 데 사용됩니다. 창.닫기 window.open 메소드로 열린 웹페이지를 닫는 메소드입니다. window.open() 메서드를 자세히 참조하세요.
끈으로 길게
창.열기()
미리 정의된 창 방법입니다. 자바스크립트 브라우저에서 새 탭이나 창을 여는 데 사용됩니다. 이는 브라우저 설정이나 새 창이나 탭이 열리는 window.open() 메서드에 전달된 매개변수에 따라 달라집니다.
이 방법은 Chrome과 같은 거의 모든 널리 사용되는 웹 브라우저에서 지원됩니다. 파이어폭스 등. 다음은 창 열기 메서드의 구문과 매개변수입니다.
통사론
이 함수는 4개의 매개변수를 허용하지만 선택사항입니다.
window.open(URL, name, specs, replace);
또는
사용하지 않고도 이 기능을 사용할 수 있습니다. 창문 아래와 같이 키워드:
open(URL, name, specs, replace)
두 구문 사이에는 차이가 없습니다.
매개변수 목록
다음은 window.open() 메소드의 매개변수 목록입니다. - 이 메소드의 모든 매개변수는 선택사항이며 다르게 작동합니다.
URL: window.open() 함수의 이 선택적 매개변수에는 열려는 웹페이지의 URL 문자열이 포함되어 있습니다. 이 함수에 URL을 지정하지 않으면 새 빈 창이 열립니다( 정보:공백 ).
이름: 이 매개변수를 사용하면 열려는 창의 이름을 설정할 수 있습니다. 다음 값을 지원합니다.
| _공백 | 전달된 URL은 새 탭/창에 로드됩니다. |
| _부모의 | URL은 이미 열려 있는 상위 창이나 프레임에 로드됩니다. |
| _본인 | 이 매개변수를 전달하면 URL이 이전 출력을 대체하고 동일한 프레임에서 새 창이 열립니다. |
| _맨 위 | URL은 로드할 수 있는 모든 프레임세트를 대체합니다. |
| 이름 | 텍스트나 데이터를 표시할 새 창의 이름을 제공합니다. (참고 - 창 제목이 아님) |
위에서 지정한 값은 작은따옴표나 큰따옴표 안에 넣어 window.open() 함수의 name 매개변수 위치에 전달됩니다.
명세서: 이 매개변수에는 쉼표로 구분된 설정이 포함되어 있습니다. 이 매개변수에 사용되는 요소에는 공백이 포함될 수 없습니다. 예: 너비=150, 높이=100 .
여러 값을 지원합니다.
바꾸다: window.open() 메서드의 다른 매개변수와 마찬가지로 이 매개변수도 선택적 매개변수입니다. 새 항목을 생성하거나 기록 목록의 현재 항목을 대체합니다. 두 개의 부울 값을 지원합니다. 이는 true 또는 false를 반환한다는 의미입니다.
| 진실 | URL이 기록 목록의 현재 항목이나 문서를 대체하는 경우 true를 반환합니다. |
| 거짓 | URL이 기록 목록에 새 항목을 생성하면 false를 반환합니다. |
반환 값
새로 열린 창이 반환됩니다.
예
다음은 브라우저 창/탭을 여는 window.open() 함수의 몇 가지 예입니다. 기본적으로 지정된 URL은 새 탭이나 창에서 열립니다. 아래 예를 참조하세요.
.net 튜토리얼
1. URL 매개변수를 사용한 open()
이것은 내부에 웹 사이트 URL이 있는 창 열기 방법의 간단한 예입니다. 우리는 버튼을 사용했습니다. 이 버튼을 클릭하면 window.open() 메서드가 호출되어 새 브라우저 탭에서 웹사이트가 열립니다.
코드 복사
Click the button to open new window <br> <br> Open Window지금 테스트해보세요
또는
이 코드는 아래와 같이 작성할 수 있습니다.
코드 복사
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window 지금 테스트해보세요 산출
이것을 클릭하면 창 열기 버튼을 누르면 javatpoint 사이트가 같은 창 안의 새 탭에서 열립니다.
아래 스크린샷을 참조하세요.
2. 매개변수 없이 open()
이 예에서는 새 탭이 이전 창에서 열리도록 window.open() 함수에 매개 변수를 전달하지 않습니다.
코드 복사
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window 지금 테스트해보세요 산출
캣 팀프 무게
위의 코드를 실행하면 버튼이 나타납니다.
이것을 클릭하면 창 열기 버튼을 누르면 새 탭에 빈 창이 열립니다.
3. 이름 매개변수를 사용하는 open()
이 예에서는 _부모의 이름 매개변수에서. 이 값(_parent, _blank, _top 등) 중 하나를 전달할 수 있습니다.
코드 복사
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window 지금 테스트해보세요 산출
코드를 실행하고 아래와 같이 출력을 얻습니다. 여기에는 동일한 상위 창에서 새 URL을 클릭하여 열 수 있는 버튼이 포함됩니다.
이 버튼을 클릭하면 Gmail이 동일한 상위 창 아래에 열립니다.
두 번째 매개변수에 다른 값을 전달하면 다른 값의 차이를 확인할 수 있습니다.
4. 새 창의 크기를 정의합니다.
이 예에서는 새 창의 높이와 너비를 지정합니다. 이를 위해 세 번째 매개변수( 명세서 ) window.open() 메서드에서 쉼표로 구분된 창의 높이와 너비를 이 함수에 전달합니다. 그러면 창이 지정된 크기로 열립니다.
코드 복사
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window 지금 테스트해보세요 산출
위의 코드를 실행하면 아래와 같이 출력됩니다. 여기에는 동일한 상위 창에서 새 URL을 클릭하여 열 수 있는 버튼이 포함됩니다.
이 버튼을 클릭하면 해당 크기의 상위 창 아래에 새 빈 창이 열립니다.
URL을 window.open() 메서드에 전달하여 웹 사이트를 열 수도 있습니다.
이름과 메시지가 있는 새 창 열기
버튼 클릭 시 열리는 새 창에 사용자 정의 텍스트나 양식을 표시할 수 있습니다. 이를 위해 새 창에 이름을 지정하고 텍스트를 작성해야 합니다. 이 이름은 window.open() 메서드에 전달됩니다. 실제 코딩으로 어떻게 구현될지는 아래 코드를 참고하세요.
온스에 10ml
코드 복사
function openWindow() { var newtab = window.open('', 'anotherWindow', 'width=300,height=150'); newtab.document.write('<p> This is 'anotherWindow'. It is 300px wide and 150px tall new window! </p>'); } <b> Click the button to open the new user-defined sized window </b> <br> <br> Open Window 지금 테스트해보세요 산출
코드를 실행하고 아래와 같이 출력을 얻습니다. 여기에는 동일한 상위 창에서 새 URL을 클릭하여 열 수 있는 버튼이 포함됩니다.
이 버튼을 클릭하면 300*150 크기의 상위 창 아래에 사용자 정의 메시지가 포함된 새 창이 열립니다.
JavaScript는 브라우저 창을 닫는 close()와 같은 내장 메서드도 제공합니다.
window.open()으로 열린 창을 닫습니다.
이 예제에서는 window.open() 메서드로 열린 창이나 탭을 닫는 방법을 보여줍니다. 먼저 버튼 클릭을 사용하여 새 창(코드에 정의된 크기)에서 웹 사이트 URL을 연 다음 다른 버튼을 사용하여 열린 창을 닫습니다. 아래 코드를 참조하여 수행 방법을 확인하세요.
코드 복사
Open and close window method example // function to open the new window tab with specified size function windowOpen() { var newWindow = window.open( 'https://www.javatpoint.com/', '_blank', 'width=500, height=350'); } // function to close the window opened by window.open() function windowClose() { newWindow.close(); } <h2> Window open() and close() method </h2> <b> Click the button to open Javatpoint tutorial site </b> <br> Open Javatpoint <br> <br> <b> Click the button to close Javatpoint tutorial site </b> <br> Close Javatpoint 지금 테스트해보세요 산출
코드를 실행하면 아래와 같은 응답을 받게 됩니다.
다음을 클릭하세요. Javatpoint 열기 버튼을 눌러 Javatpoint 튜토리얼 웹사이트를 엽니다. 열려는 새 팝업창의 크기(높이 및 너비)를 지정했습니다.
클릭하면 Javatpoint 닫기 버튼을 누르면 열려 있는 창이 최소화됩니다.
브라우저 지원
여러 웹 브라우저는 다음과 같은 window.open() 메서드를 지원합니다.
- 크롬
- 모질라 파이어 폭스
- 인터넷 익스플로러(IE)
- 오페라
- 사파리 등
위의 브라우저에서 window.open() 메서드를 사용하고 실행할 수 있습니다.