Rails:新しいタブでリンクを開く(「link_to」を使用)


139

私はこのコードを持っています:

<%= link_to image_tag("facebook.png", :class => "facebook_icon", :alt => "Facebook", :target => "_blank"),                 
            "http://www.facebook.com/mypage" %>

ユーザーがリンクをクリックしたときに、新しいタブで開くにはどうすればよいですか?

回答:


269

target: :_blank パラメータはの パラメータである必要がありますが、パラメータにlink_to配置しimage_tagます。次のようにコードを変更します。

<%= link_to image_tag("facebook.png", class: :facebook_icon, alt: "Facebook"), "http://www.facebook.com/mypage", target: :_blank %>

またはブロック付き:

<%= link_to "http://www.facebook.com/mypage", target: :_blank do %>
  <%= image_tag("facebook.png", class: :facebook_icon, alt: "Facebook") %>     
<% end %>  


8

target: :_blank代わりに使用することもできますtarget: '_blank'

<%= link_to image_tag("facebook.png", class: "facebook_icon", alt: "Facebook"), "http://www.facebook.com/mypage", target: :_blank %>

link_to do

<%= link_to "http://www.facebook.com/mypage", target: :_blank do %>
  <%= image_tag "facebook.png", class: "facebook_icon", alt: "Facebook" %>
<% end %>

3

HTML内の新しいタブでリンクを開く方法を探している場合(Googleからここに来た人は誰でも)、ここに:

<a href="http://www.facebook.com/mypage" target="_blank">Link name</a>

8
私はあなたに反対投票するつもりはありませんが、このページは特にRubyのlink_to(タイトルから)についてです。
ハーブミーハン

1
@HerbMeehan賛成投票するかどうかはわかりませんが、そのtarget: :_blank意味を説明するのに役立ちます。
Andrew Grimm

1

私の理解は:新しいタブまたは新しいサイトを開くようにブラウザーに要求できます。ただし、これはユーザー設定によって異なります。この質問に回答したと思います。

リンクオプションをhtmlオプションから分離する必要があるときに、私は罠に陥りました。

link_to(name = nil, options = nil, html_options = nil, &block)

例:

link_to('Click me', { action: 'show', controller: 'blog', id: 1 }, { target: '_blank' })

あなたの答えをありがとう、デバッグとテストの2時間を節約してくれました
Carlos

1

前の回答に加えて、以下の形式はrubocopによって提案されているものです。ロードされたページが前のページを制御し、フィッシング目的でその場所を変更する可能性があるため、これはセキュリティリスクになる可能性があります。

これを防ぐには、コードに 'rel'属性を追加する必要があります。

rel: 'noopener'

これでlink_toは次のようになります。

<%= link_to image_tag("facebook.png", class: :facebook_icon, alt: "Facebook"), "http://www.facebook.com/mypage", target: :_blank, rel: 'noopener %>

rubocopドキュメント

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.