【JavaScript】ポップアップウィンドウを開く方法｜window.open・サイズ位置指定・ポップアップブロック対策・postMessage 親子間通信まで解説

// 基本形
window.open('https://example.com');

// 第2引数：ウィンドウ名（_blank=新規, _self=現タブ, _parent, _top, または任意の名前）
window.open('https://example.com', '_blank');

// 第3引数：ウィンドウの外観を指定する文字列（スペースなし・カンマ区切り）
window.open(
  'https://example.com',
  'myPopup',
  'width=800,height=600,left=100,top=100'
);

// 戻り値：開いたウィンドウへの参照（ブロックされた場合は null）
const popup = window.open('https://example.com', '_blank');
if (popup === null) {
  console.log('ポップアップがブロックされました');
}

/**
 * 画面中央にポップアップを表示する
 * @param {string} url
 * @param {number} w - 幅（px）
 * @param {number} h - 高さ（px）
 */
function openCentered(url, w = 800, h = 600) {
  const left = Math.round(window.screenX + (window.outerWidth  - w) / 2);
  const top  = Math.round(window.screenY + (window.outerHeight - h) / 2);

  return window.open(
    url,
    '_blank',
    `width=${w},height=${h},left=${left},top=${top},noopener,noreferrer`
  );
}

// 使い方
openCentered('https://example.com/help', 900, 650);

document.getElementById('openBtn').addEventListener('click', () => {
  // クリックハンドラ内で即時呼び出し → ブロックされない
  window.open('https://example.com', '_blank', 'noopener,noreferrer');
});

document.getElementById('authBtn').addEventListener('click', async () => {
  // ① クリック直後に空ウィンドウを先に開いておく
  const popup = window.open('', '_blank', 'width=500,height=700');

  try {
    // ② 非同期で認証URLを取得
    const res = await fetch('/api/auth/url');
    const { authUrl } = await res.json();

    // ③ 取得したURLをポップアップに設定
    popup.location.href = authUrl;
  } catch (err) {
    // 失敗したらポップアップを閉じる
    popup.close();
    alert('認証URLの取得に失敗しました');
  }
});

function openPopupWithFallback(url, options = 'width=800,height=600,noopener,noreferrer') {
  const popup = window.open(url, '_blank', options);

  if (popup === null || popup.closed) {
    // ブロックされた → 通常のタブで開くようユーザーに案内
    const openLink = document.createElement('a');
    openLink.href   = url;
    openLink.target = '_blank';
    openLink.rel    = 'noopener noreferrer';
    openLink.textContent = 'こちらをクリックして開いてください';

    const msg = document.getElementById('popupMsg');
    if (msg) {
      msg.innerHTML = '';
      msg.append('ポップアップがブロックされました。', openLink);
      msg.hidden = false;
    }
  }
  return popup;
}

let popup = null;

document.getElementById('openBtn').addEventListener('click', () => {
  // すでに開いていて閉じられていなければ再利用
  if (popup && !popup.closed) {
    popup.focus(); // 既存のウィンドウを前面に
    return;
  }

  popup = window.open(
    '/help',
    'helpWindow',
    'width=900,height=700,noopener'
  );
});

document.getElementById('closeBtn').addEventListener('click', () => {
  if (popup && !popup.closed) {
    popup.close();
    popup = null;
  }
});

// ポップアップが閉じられたかどうかを定期確認
const checkInterval = setInterval(() => {
  if (popup && popup.closed) {
    console.log('ポップアップが閉じられました');
    popup = null;
    clearInterval(checkInterval);
  }
}, 500);

// 親ウィンドウ：postMessage のリスナーを設定
window.addEventListener('message', (e) => {
  // ① 送信元オリジンを必ず検証する（セキュリティ上必須）
  if (e.origin !== 'https://your-domain.com') return;

  // ② データを処理
  const { type, payload } = e.data;

  if (type === 'AUTH_SUCCESS') {
    console.log('認証成功:', payload.token);
    // ポップアップを閉じて処理を続ける
    if (popup && !popup.closed) popup.close();
  }
});

// ポップアップウィンドウ側のスクリプト
// 認証成功後などに親ウィンドウへメッセージを送信
function notifyParent(token) {
  if (!window.opener || window.opener.closed) return;

  window.opener.postMessage(
    { type: 'AUTH_SUCCESS', payload: { token } },
    'https://your-domain.com' // ターゲットオリジンを明示（必須）
  );

  // 送信後に自分自身を閉じる
  window.close();
}