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을 지정하지 않으면 새 빈 창이 열립니다( 정보:공백 ).

이름: 이 매개변수를 사용하면 열려는 창의 이름을 설정할 수 있습니다. 다음 값을 지원합니다.

위에서 지정한 값은 작은따옴표나 큰따옴표 안에 넣어 window.open() 함수의 name 매개변수 위치에 전달됩니다.

명세서: 이 매개변수에는 쉼표로 구분된 설정이 포함되어 있습니다. 이 매개변수에 사용되는 요소에는 공백이 포함될 수 없습니다. 예: 너비=150, 높이=100 .

여러 값을 지원합니다.

바꾸다: window.open() 메서드의 다른 매개변수와 마찬가지로 이 매개변수도 선택적 매개변수입니다. 새 항목을 생성하거나 기록 목록의 현재 항목을 대체합니다. 두 개의 부울 값을 지원합니다. 이는 true 또는 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(&apos;https://www.javatpoint.com&apos;); } 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(&apos;https://gmail.com&apos;, &apos;_parent&apos;); } <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(&apos;&apos;, &apos;&apos;, &apos;width=300,height=200&apos;); } <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(&apos;&apos;, &apos;anotherWindow&apos;, &apos;width=300,height=150&apos;); newtab.document.write(&apos;<p> This is &apos;anotherWindow&apos;. It is 300px wide and 150px tall new window! </p>&apos;); } <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( &apos;https://www.javatpoint.com/&apos;, &apos;_blank&apos;, &apos;width=500, height=350&apos;); } // 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() 메서드를 사용하고 실행할 수 있습니다.

참고: JavaScript의 close() 메서드를 사용하면 열려 있는 브라우저 창이나 window.open()으로 열린 탭을 닫을 수 있습니다. 이에 대해서는 다음 장에서 더 자세히 논의하겠습니다.