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

2022-10-12JavaScript イベント,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');
};