HTMLのリンクを別タブで開く方法とJavascriptを使った代替方法について紹介します。
HTMLのリンクは通常同じタブ内でページが開くようになっていますが、別タブや別ウィンドウで開きたい場合は簡単な設定で対応できます。
設定をしても別タブで開かない場合もあるのでその対処方法についても解説します。
HTMLリンクを別タブで開く方法
HTMLで作ったリンクを別タブで開くようにするにはaタグにtarget="_blank"をつけるだけです。コードで書くと次のようになります。
<a href="https://example.com" target="_blank">リンク</a>別タブで開きたいリンクにそれぞれ設定する必要があります。
target="_blank"の代わりにJavascriptで別タブを開く
上の例ではaタグにtarget属性を入れて別タブで開くようにしましたが、全てのHTMLタグに対して属性を入れる必要があるため場合によっては結構大変な作業になるかもしれません。
そんなときにはJavascriptを使って特定のclassやidに対して一括で別タブを開くようにできます。
<a href="#" id="link">リンク</a>
<script>
const link = document.getElementById('link');
link.addEventListener('click', function(event) {
event.preventDefault();
window.open('https://example.com', '_blank');
});
</script>class属性を使う場合はこちらのようになります。
<a href="#" class="link">リンク</a>
<script>
const links = document.querySelectorAll('.link');
links.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
window.open('https://example.com', '_blank');
});
});
</script>HTMLリンクを別ウィンドウで開く方法
別タブではなく別ウィンドウ(ポップアップウィンドウ)で開くには、aタグに属性を追加するだけでは無理なので、JavaScriptを使います。
aタグに次のようなコードを入れることでポップアップウィンドウを表示できます。
<a href="#" onclick="window.open('https://example.com', '_blank', 'width=800,height=600'); return false;">リンク</a>widthやheightでウィンドウの幅と高さを設定できます。
リンクが別タブや別ウィンドウで開かない場合の対処法
HTMLのaタグにtarget="_blank"を入れたのにうまくタブが開いてくれない場合に考えられる原因は次のようなものがあります。
- ブラウザのポップアップブロッカーでブロックされている
- Javascriptがブロックされている
- リンクURLや
target="_blank"の書き方が間違っている
ブラウザのポップアップブロッカーでブロックされている
ブラウザのポップアップブロッカーでブロックされている場合は別ウィンドウで開くことができない場合があるので、ブラウザ設定を変更する必要があります。
Javascriptがブロックされている
Javascriptで別タブが開くようにしている場合、ブラウザ設定でJavascriptが無効になっているとうまく開きません。Javascriptを有効にする必要があります。
リンクURLやtarget="_blank"の書き方が間違っている
リンクやtarget="_blank"の書き方が間違っている可能性もあるのでもう一度記入ミスがないか確認しておきましょう。
まとめ
この記事ではHTMLのリンクを別タブや別ウィンドウで開く方法を紹介しました。簡単に内容をまとめてみます。
- 別タブで開くには
aタグにtarget="_blank"をつける - Javascriptを使って指定したIDやClassを別タブで開くことができる
- 別ウィンドウで開くにはJavascriptを使用する
- うまく開かない場合はブラウザ設定や記入ミスを確認する
やること自体は簡単ですが、忘れがちなところでもあるのでコードスニペットなんかで保存しておくと便利です。