JavaScript에서 팝업 창 열기

이 글에서는 JavaScript를 사용하여 팝업창을 여는 방법을 소개합니다.

JavaScript에서 Window open() 메서드를 사용하여 팝업 창 열기

팝업 창은 원래 창을 열어 둔 상태에서 사용자에게 추가 정보를 보여주는 또 다른 창입니다. 경우에 따라 웹 사이트에서 사용자와 상호 작용하는 동안 팝업 창을 사용해야 합니다.

인기 있는 시나리오 중 하나는 OAuth 인증을 수행하는 동안입니다. 예를 들어 Gmail 계정을 사용하여 SAAS 응용 프로그램에 로그인하려고 할 때마다 새 팝업 창이 열리고 응용 프로그램에 로그인하기 위해 선택할 수 있는 Gmail 계정 목록이 표시됩니다.

팝업 창에 대해 주목해야 할 중요한 개념은 JavaScript 환경이 있어 타사 응용 프로그램 및 신뢰할 수 없는 사이트를 안전하게 실행할 수 있다는 것입니다. 이제 이러한 팝업 창을 만드는 방법을 살펴보겠습니다.

window 객체가 제공하는 open() 메서드는 새 창을 엽니다. open() 메서드의 구문은 다음과 같습니다.

window.open(url, name, parameter)

url 옵션은 팝업 창으로 열리는 페이지의 URL입니다. 이름 옵션은 열려는 창의 이름입니다.

window.name은 브라우저에서 창의 이름을 정의합니다. 매개변수 옵션은 창을 열 때 구성 옵션에 대한 표기입니다.

높이/너비, 메뉴 모음, 도구 모음 등과 같은 여러 구성이 포함되어 있습니다.

예를 들어 url 및 windowName이라는 두 개의 매개 변수를 사용하는 JavaScript 함수 popUp()을 만듭니다. 함수 내에서 newWindow 변수를 만들고 변수의 window 개체를 사용하여 open() 메서드를 호출합니다.

open() 메서드에서 url, windowName, height 및 width 매개 변수를 제공합니다. 원하는 높이와 너비를 설정합니다.

다음으로 window.focus 조건을 확인하고 true인 경우 newWindow.focus()로 방금 만든 새 창에 포커스를 설정합니다. 마지막으로 false를 반환합니다.

HTML에서 앵커 태그 <a> </a>를 만듭니다. href 속성에서 원하는 URL을 설정하십시오.

그런 다음 앵커 태그 내에서 onclick 이벤트를 생성합니다. href 속성과 동일한 URL과 창 이름을 매개변수로 하여 popUp() 함수를 호출합니다.

앵커 태그 사이에 텍스트를 작성하여 클릭 가능한 링크를 만듭니다.

예제 코드:

function popUp(url, windowName) {
  var newWindow = window.open(url, windowName, 'height=200,width=200');
  if (window.focus) {
    newWindow.focus()
  }
  return false;
}

<a href="https://www.youtube.com/" onclick="return popUp('https://www.youtube.com/', 'youtube')">Youtube Popup</a>

위의 예에서는 YouTube의 URL https://www.youtube.com/을 사용하여 새 팝업 창을 생성했습니다. onClick 이벤트가 발생할 때마다 새 창이 생성됩니다.

그러면 새로 생성된 창으로 포커스가 이동되어 팝업으로 표시됩니다. 브라우저가 href 속성에 설정된 URL로 리디렉션되지 않도록 함수에서 false를 반환했습니다.

따라서 JavaScript에서 window.open 메서드를 사용하여 새 팝업 창을 여는 방법을 배웠습니다.