1654093152
新しいタブでリンクを開く方法–HTMLターゲットの空白の属性
ユーザーがウェブサイトのリンクをクリックして、新しいブラウザタブで開くようにしたい場合があります。しかし、HTMLでそれをどのように行うのですか？
この記事では、target="_blank"コード例を通じて属性の使用方法を示します。また、この属性の使用を検討する必要がある場合についても説明します。
を使用して新しいブラウザタブを開く方法target="_blank"
このtarget="_blank"属性は、次のように開始アンカータグ内で使用されます。
<a href="website-link-goes-here" target="_blank">ユーザーがリンクをクリックすると、新しいブラウザタブが自動的にそのページに開きます。
この例では、段落タグのセット内にリンクをネストして、ユーザーをfreeCodeCampに誘導しています。
<p>To learn how to code for free, please visit <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp.org</a></p>freeCodeCampリンクをクリックすると、新しいブラウザタブが開きます。
属性を省略した場合target="_blank"、デフォルトの動作では、現在のWebページを離れて、新しいブラウザタブを開かずにリンクに直接移動します。
キーワードとは何ですか？noopener
属性のnoopenerキーワードは、rel主にセキュリティ上の理由から、悪意のあるユーザーがWindow.openerプロパティを介して元のWebページを操作するのを防ぐために使用されます。悪意のあるユーザーがウィンドウオブジェクトにアクセスした場合、悪意のあるURLにページをリダイレクトする可能性があります。
noopenerこのキーワードは、セキュリティの問題が発生しないようにするための方法として使用できます。noopenerキーワードの使用方法は次のとおりです。
<a target="_blank" rel="noopener" href="https://devdocs.io/html/element/heading_elements">DevDocs documentation</a>解決に役立ったセキュリティ上の懸念について詳しく知りたい場合は、この役立つ記事rel=noopenerをお読みください。
キーワードの更新noopener
2021年に、最新のブラウザが属性rel=noopenerを使用して任意のリンクに設定されるように更新されました。target=_blankこの「使用できますか」の表からわかるように、このnoopenerキーワードはInternetExplorer11を除くほとんどのブラウザーでサポートされています。
このアップデートを使用しても、多くの開発者は属性を使用rel=noopenerするリンクに引き続き使用しtarget=_blankます。
この属性を常に使用する必要がありますか？target="_blank"
ユーザーがリンクをクリックすると、デフォルトの動作では、新しいブラウザタブを開かずに、現在のページでそのリンクを開くことができます。多くの場合、ユーザーはこれを期待するようになっているため、このデフォルトの動作を変更したくない場合があります。
target="_blank"属性を使用するのに適した時期について慎重に検討する必要があります。1つの良い例は、ユーザーがページで作業していて、リンクをクリックしてもそのページを離れたくない場合です。
この例では、DevDocsドキュメントにリンクしているため、ユーザーは現在のページにとどまり、新しいタブで参照を検索できます。
結論
target="_blank"ユーザーに新しいブラウザタブを開くリンクをクリックしてもらいたい場合は、この属性を使用できます。
このtarget="_blank"属性は、このように開始アンカータグ内で使用されます。
<a href="website-link-goes-here" target="_blank">属性のnoopenerキーワードは、rel悪意のあるユーザーがWindow.openerプロパティを介して元のWebページをいじるのを防ぐために追加されます。
<a target="_blank" rel="noopener" href="link-goes-here">target="_blank"リンクのデフォルトの動作を常に変更したくないので、属性を使用するのに適した時期を慎重に検討する必要があります。
この記事を楽しんでいただき、プログラミングの旅で頑張っていただければ幸いです。
元の記事のソース：https ：//www.freecodecamp.org/news/how-to-open-a-link-in-a-new-tab/
What is GEEK
Buddha Community
1654093152
新しいタブでリンクを開く方法–HTMLターゲットの空白の属性
ユーザーがウェブサイトのリンクをクリックして、新しいブラウザタブで開くようにしたい場合があります。しかし、HTMLでそれをどのように行うのですか？
この記事では、target="_blank"コード例を通じて属性の使用方法を示します。また、この属性の使用を検討する必要がある場合についても説明します。
を使用して新しいブラウザタブを開く方法target="_blank"
このtarget="_blank"属性は、次のように開始アンカータグ内で使用されます。
<a href="website-link-goes-here" target="_blank">ユーザーがリンクをクリックすると、新しいブラウザタブが自動的にそのページに開きます。
この例では、段落タグのセット内にリンクをネストして、ユーザーをfreeCodeCampに誘導しています。
<p>To learn how to code for free, please visit <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp.org</a></p>freeCodeCampリンクをクリックすると、新しいブラウザタブが開きます。
属性を省略した場合target="_blank"、デフォルトの動作では、現在のWebページを離れて、新しいブラウザタブを開かずにリンクに直接移動します。
キーワードとは何ですか？noopener
属性のnoopenerキーワードは、rel主にセキュリティ上の理由から、悪意のあるユーザーがWindow.openerプロパティを介して元のWebページを操作するのを防ぐために使用されます。悪意のあるユーザーがウィンドウオブジェクトにアクセスした場合、悪意のあるURLにページをリダイレクトする可能性があります。
noopenerこのキーワードは、セキュリティの問題が発生しないようにするための方法として使用できます。noopenerキーワードの使用方法は次のとおりです。
<a target="_blank" rel="noopener" href="https://devdocs.io/html/element/heading_elements">DevDocs documentation</a>解決に役立ったセキュリティ上の懸念について詳しく知りたい場合は、この役立つ記事rel=noopenerをお読みください。
キーワードの更新noopener
2021年に、最新のブラウザが属性rel=noopenerを使用して任意のリンクに設定されるように更新されました。target=_blankこの「使用できますか」の表からわかるように、このnoopenerキーワードはInternetExplorer11を除くほとんどのブラウザーでサポートされています。
このアップデートを使用しても、多くの開発者は属性を使用rel=noopenerするリンクに引き続き使用しtarget=_blankます。
この属性を常に使用する必要がありますか？target="_blank"
ユーザーがリンクをクリックすると、デフォルトの動作では、新しいブラウザタブを開かずに、現在のページでそのリンクを開くことができます。多くの場合、ユーザーはこれを期待するようになっているため、このデフォルトの動作を変更したくない場合があります。
target="_blank"属性を使用するのに適した時期について慎重に検討する必要があります。1つの良い例は、ユーザーがページで作業していて、リンクをクリックしてもそのページを離れたくない場合です。
この例では、DevDocsドキュメントにリンクしているため、ユーザーは現在のページにとどまり、新しいタブで参照を検索できます。
結論
target="_blank"ユーザーに新しいブラウザタブを開くリンクをクリックしてもらいたい場合は、この属性を使用できます。
このtarget="_blank"属性は、このように開始アンカータグ内で使用されます。
<a href="website-link-goes-here" target="_blank">属性のnoopenerキーワードは、rel悪意のあるユーザーがWindow.openerプロパティを介して元のWebページをいじるのを防ぐために追加されます。
<a target="_blank" rel="noopener" href="link-goes-here">target="_blank"リンクのデフォルトの動作を常に変更したくないので、属性を使用するのに適した時期を慎重に検討する必要があります。
この記事を楽しんでいただき、プログラミングの旅で頑張っていただければ幸いです。
元の記事のソース：https ：//www.freecodecamp.org/news/how-to-open-a-link-in-a-new-tab/