ブラウザによるポップアップブロック機能について

ブラウザによって、JavaScriptが動作したりしなかったりすることがあります。
今回は、window.open()メソッドを使用した際にうまく動作しなかったため、調べたことをまとめます。

原因

ポップアップブロッカーが有効になると、ポップアップが制限されます。
ブラウザは、ユーザーの意図しないポップアップと判断し、ブロックします。
ユーザーが許可しない限り、ユーザーのアクションなしでポップアップを開くことはできません。

Chrome:Chromeでポップアップをブロックまたは許可する

Safari:Safariでポップアップ広告やポップアップウインドウをブロックする

Firefox:ポップアップブロックの設定とトラブルシューティング

Window.open()メソッドとは

window.open()メソッドは、JavaScriptで新しいブラウザウィンドウまたはタブを開くためのメソッドです。このメソッドを使うことで、指定した URL を新しいウィンドウやタブで表示したり、ポップアップウィンドウを開いたりできます。

使い方

window.open('https://example.com', '_blank');

うまく動作する時

ボタンの要素を取得して、取得したボタンがクリックされた時に、別タブに遷移する

※HTMLファイルにコピーして動作確認できます。

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
		const button = document.getElementById('openWindow');
        button.addEventListener('click', function () {
            window.open('https://example.com', '_blank');
        });
    });
</script>
<button id="openWindow">Open example</button>

document.addEventListener('DOMContentLoaded', (event) => {}を記述する理由は、以下の記事にまとめています。

うまく動作しない時

ページが読み込まれた後に、そのまま別ページに遷移させようとする

ブラウザが、ユーザーが意図しないポップアップと判断してブロックします。
※HTMLファイルにコピーして動作確認できます。

<script>
    window.open('https://example.com', '_blank');
</script>

非同期で取得した値をURLに付け加えて遷移させようとする時

ブラウザの仕様によって、遷移が失敗する
※google chromeでは成功するが、safariでは失敗する
※HTMLファイルにコピーして動作確認できます。

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        const openWindowUrl = 'https://example.com';
		async function getToken() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    // 適当な文字列を生成する
					const random = Math.random().toString(32).substring(2);
					const openWindowUrlWithToken = openWindowUrl + `?token=${random}`;
					// トークンを含めたURLを返す
					resolve(openWindowUrlWithToken);
				}, 999);
			});
	}

	document.getElementById('openWindowGeneratedUrl').addEventListener('click', async function () {
        const generatedUrl = await getToken();
        window.open(generatedUrl, '_blank');
		});
	});
</script>
<button id="openWindowGeneratedUrl">Open example generated url</button>

Reactでこのような実装は注意が必要です。
※こちらはHTMLファイルにコピーしても動作しません。

const openWindowGeneratedUrl = async () => {
const openWindowUrl = 'https://example.com';
    try {
        const { auth_token } = await getToken();
        const generatedUrl = `${openWindowUrl}?token=${auth_token}`
        window.open(generatedUrl, '_blank');
	} catch (err) {
        console.error(err);
	}
};
openWindowGeneratedUrl();

まとめ

window.open()メソッドを使って、別タブで外部サイトを開く時に使いたい時があります。
しかし、ユーザーがポップアップを許可していない場合や、ブラウザによって動作しないことがあるため、注意が必要です。
別タブではなく同じタブで開く、またはボタンを押したタイミングで別タブに遷移するなどの実装方法を検討する必要があります。