JavaScript | 新規タブでページを開くボタン

2021-01-312022-10-12JavaScript イベント,JavaScript

JavaScriptを使って新規タブでページを開くボタンの実装方法です。

See the Pen JavaScript | Open page in new window by yochans (@yochans) on CodePen.

新規タブでページを開く

JavaScriptでページを新規タブで開くにはwindow.open()の第二引数に「_blank」を指定します。

window.open('https://1-notes.com/', '_blank');

現在、多くのブラウザでは自動ポップアップのブロック機能が備わっており、ユーザーの操作なしで新規タブ・ウィンドウを開くことはできません。

この記事では、<button>にクリックイベントを追加して、クリックしたら新しいタブで指定のページを開くようにしています。

<button class="btns" id="new-window-open">new window open</button>

//btn
const btn = document.querySelector('#new-window-open');

//new window open
btn.addEventListener( 'click' , new_window_open );

function new_window_open(){
	window.open('https://1-notes.com/', '_blank');
};