브라우저 환경에서 팝업 창 위치 정확하게 조절하기

1. 기본 형태

var ret = window.open(url, name, specs, replace);

1. 반환값 (ret)
• 새로 생성된 창에 대한 참조를 반환합니다. 팝업이 차단되어 창을 열 수 없거나 보안 설정으로 인해 창을 열지 못하면 null을 반환합니다. 이 객체를 통해 새 창을 제어할 수 있습니다 (예: ret.close()로 창 닫기).

2. url
• 새 창에 로드할 URL을 지정합니다. URL을 제공하지 않으면 about:blank가 로드됩니다.

3. name
• 새 창의 이름이나 타겟을 지정합니다. 이름이 이미 사용 중인 창이 있다면, 그 창에 URL이 로드됩니다.
• _blank: 새 창이나 탭에 URL이 로드됩니다 (기본값).
• _parent: 현재 창의 부모 프레임에 URL이 로드됩니다. 부모 프레임이 없으면 _self처럼 작동합니다.
• _self: 현재 창에 URL을 로드합니다.
• _top: 현재 창의 최상위 프레임에 URL이 로드됩니다.
• 임의의 이름: 지정된 이름의 새 창이 열리며, 이름이 지정된 창이 이미 있다면 해당 창에 URL이 로드됩니다.

4. specs
• 새 창의 모양이나 동작에 대한 세부 사항을 지정하는 선택적 문자열입니다. 다양한 속성을 key=value 쌍으로 나열할 수 있으며, 각 속성은 쉼표로 구분됩니다.
• channelmode=yes|no|1|0: 전체 화면 모드에서 창을 열지 여부를 지정합니다 (IE에서만 작동).
• fullscreen=yes|no|1|0: 창을 전체 화면으로 열지 여부를 지정합니다 (주로 IE에서만 작동).
• height=pixels: 창의 높이를 픽셀 단위로 지정합니다.
• width=pixels: 창의 너비를 픽셀 단위로 지정합니다.
• left=pixels: 화면 왼쪽에서의 창 위치를 픽셀 단위로 지정합니다.
• top=pixels: 화면 상단에서의 창 위치를 픽셀 단위로 지정합니다.
• location=yes|no|1|0: 주소 표시줄을 보여줄지 여부를 지정합니다.
• menubar=yes|no|1|0: 메뉴바의 표시 여부를 지정합니다.
• resizable=yes|no|1|0: 창의 크기 조절 가능 여부를 지정합니다.
• scrollbars=yes|no|1|0: 스크롤바의 표시 여부를 지정합니다.
• status=yes|no|1|0: 상태바의 표시 여부를 지정합니다.
• titlebar=yes|no|1|0: 타이틀바의 표시 여부를 지정합니다 (일부 브라우저에서는 무시될 수 있습니다).
• toolbar=yes|no|1|0: 툴바의 표시 여부를 지정합니다.
1. replace
• 새 URL이 브라우저 히스토리에서 현재 항목을 대체할지, 아니면 새 항목을 만들지를 지정합니다.
• true: 현재 항목을 대체합니다.
• false: 히스토리에 새 항목을 추가합니다.

2. 단일 모니터

const openGitHubPage = () => {
    const popupWidth = 1200;
    const popupHeight = 600;
    const popupX = Math.round(window.screen.width / 2 - popupWidth / 2);
    const popupY = Math.round(window.screen.height / 2 - popupHeight / 2);

    const featureWindow =
      "width=" +
      popupWidth +
      ", height=" +
      popupHeight +
      ", left=" +
      popupX +
      ", top=" +
      popupY;

    return window.open("https://github.com/alpaka206", "_blank", featureWindow);
  };

2. 듀얼 모니터

 

  const openGitHubPage = () => {
    const popupWidth = 1200;
    const popupHeight = 600;
    const popupX = Math.round(
      window.screenX + window.outerWidth / 2 - popupWidth / 2
    );
    const popupY = Math.round(
      window.screenY + window.outerHeight / 2 - popupHeight / 2
    );

    const featureWindow =
      "width=" +
      popupWidth +
      ", height=" +
      popupHeight +
      ", left=" +
      popupX +
      ", top=" +
      popupY;

    return window.open("https://github.com/alpaka206", "_blank", featureWindow);
  };

결론