Target=

「target="_blank"」が効かない？その原因と対策を解説

Webサイト制作において、新しいタブやウィンドウでリンクを開きたい場合に、target="_blank"属性を指定するのが一般的です。しかし、場合によっては、この属性が正常に機能せず、リンクが同じタブで開いてしまうことがあります。この記事では、「target="_blank"」が無効になる原因と、その対策について詳しく解説します。

「target="_blank"」が無効になる原因

「target="_blank"」が無効になる主な原因としては、以下の3つが挙げられます。

使用しているブラウザやOSのバージョン
ブラウザの設定
JavaScriptの干渉

使用しているブラウザやOSのバージョン

一部のAndroid端末やGoogle Chromeの特定バージョンでは、「target="_blank"」が正常に機能しない場合があることが報告されています。これは、ブラウザやOSのセキュリティ対策や仕様変更などが原因と考えられます。

ブラウザの設定

ブラウザの設定によっては、「target="_blank"」を無効にするオプションが有効になっている場合があります。例えば、ポップアップブロックの設定や、リンクの開き方を変更する拡張機能などが挙げられます。

JavaScriptの干渉

Webページ上で動作しているJavaScriptコードが、「target="_blank"」属性を無効にするように設定されている場合があります。これは、ページの表示や機能を制御するために、JavaScriptがリンクの動作に介入していることが原因と考えられます。

「target="_blank"」が無効になる場合の対策

「target="_blank"」が無効になる場合の対策としては、以下の3つの方法が考えられます。

1. rel="noopener noreferrer" を指定する

「rel="noopener noreferrer"」は、セキュリティ上のリスクを軽減するために、新しいタブで開くページとの関係性を断ち切る属性です。この属性を指定することで、「target="_blank"」が無効になる問題を解決できる場合があります。

HTMLコード例


<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">新しいタブで開く</a>

2. JavaScriptを使用する

JavaScriptを使用することで、リンクをクリックした際に、新しいタブを開く処理を明示的に記述することができます。

HTMLコード例


<a href="https://www.example.com" onclick="window.open(this.href, '_blank'); return false;">新しいタブで開く</a>

3. ブラウザの設定を確認する

ブラウザの設定画面で、「target="_blank"」を無効にする設定が無効になっているかを確認しましょう。また、ポップアップブロックの設定や、リンクの開き方を変更する拡張機能がインストールされている場合は、それらの設定を見直してみましょう。

「target="_blank"」に関する注意点

「target="_blank"」を使用する際には、以下の点に注意が必要です。

セキュリティリスク：悪意のあるWebサイトに誘導される可能性があるため、信頼できるサイトのリンクにのみ使用しましょう。
ユーザーエクスペリエンス：新しいタブが自動的に開くため、ユーザーによっては煩わしく感じる場合があります。ユーザーの意図しない動作は避けるように心がけましょう。

まとめ

「target="_blank"」は、新しいタブでリンクを開く際に便利な属性ですが、状況によっては正常に機能しない場合があります。この記事で紹介した対策方法を試して、問題を解決してみてください。また、「target="_blank"」を使用する際には、セキュリティリスクやユーザーエクスペリエンスに配慮することが重要です。

よくある質問

質問	回答
Q. 「rel="noopener"」と「rel="noreferrer"」の違いは何ですか？	A. 「noopener」は、新しいタブで開くページに対して、JavaScriptのwindow.openerオブジェクトへのアクセスをブロックします。一方、「noreferrer」は、HTTPリクエストヘッダーのReferer情報を削除します。両方を指定することで、より安全性を高めることができます。
Q. JavaScriptを使用せずに、「target="_blank"」を有効にする方法はありますか？	A. ブラウザの設定や拡張機能によって異なりますが、基本的にはJavaScriptを使用しない方法はありません。
Q. モバイル端末で「target="_blank"」が無効になる場合はどうすればよいですか？	A. モバイル端末の場合、ブラウザの設定で「リンクを新しいタブで開く」といったオプションが用意されていることがあります。そのオプションを有効にすることで、JavaScriptを使用せずに新しいタブでリンクを開くことができる場合があります。

参考資料

その他の参考記事:jquery target blank