Làm thế nào để mở liên kết trong tab mới trên html?

390

Tôi đang làm việc trên một dự án HTML và tôi không thể tìm ra cách mở một liên kết trong một tab mới mà không cần javascript.

Tôi đã biết rằng <a href="http://www.WEBSITE_NAME.com"></a>mở liên kết trong cùng một tab. Bất kỳ ý tưởng làm thế nào để làm cho nó mở trong một cái mới?

— Lập trình Zenthyx
nguồn

40

sử dụng<a href="url" target="_blank">...</a>

— Rohit Agrawal

1

Như Rohit nói, hãy thêm param target = "_ blank", tuy nhiên, trên FireFox ít nhất nếu bạn thực hiện hai dấu gạch dưới đích = "__ blank", nó sẽ mở trong một tab mới, nhưng nhấp vào các liên kết khác bằng cách sử dụng cùng dấu gạch dưới kép, sẽ mở mới các trang trong tab mới trước đó, nghĩa là bạn chỉ có một tab bổ sung được mở.

— Justin Levene

599

Đặt thuộc tính 'đích' của liên kết thành _blank:

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

Chỉnh sửa: để biết các ví dụ khác, xem tại đây: http://www.w3schools.com/tags/att_a_target.asp

(Lưu ý: Trước đây tôi đã đề xuất blankthay _blankvì bởi vì, nếu được sử dụng, nó sẽ mở một tab mới và sau đó sử dụng cùng một tab nếu liên kết được nhấp lại. Tuy nhiên, điều này chỉ bởi vì, như GolezTrol đã chỉ ra, nó đề cập đến tên a của khung / cửa sổ, sẽ được đặt và sử dụng khi nhấn liên kết một lần nữa để mở nó trong cùng một tab).

Cân nhắc an ninh!

Điều rel="noopener noreferrer"này là để ngăn chặn tab mới được mở có thể sửa đổi tab ban đầu một cách độc hại. Để biết thêm thông tin về lỗ hổng này, hãy xem các tài nguyên sau:

— Gỗ cá mập
nguồn

16

Tất cả các mục tiêu đặc biệt bắt đầu với một dấu gạch dưới. blanksẽ là tên của một khung hoặc cửa sổ. Nó có vẻ hoạt động, bởi vì một cửa sổ hoặc tab mới có thể sẽ được mở khi không tồn tại với tên 'trống', nhưng lần nhấp thứ hai vào liên kết sẽ mở lại trang trong cùng một tab đó thay vì mở một trang khác.

— GolezTrol

2

Chà, tôi đoán nó không hợp lệ, nó chỉ khác. Thay vì blankbạn có thể sử dụng tốt như vậy foo, tôi nghĩ, trong khi _blankthực sự có một ý nghĩa đặc biệt. Tôi không thể tìm thấy bất kỳ thông tin để chứng minh khác. Bạn có thể?

— GolezTrol

2

@Stefan Không, _blanksẽ ổn thôi; mỗi liên kết sẽ mở trong một tab khác nhau. Nếu bạn chỉ định tên mà không có dấu gạch dưới, (ví dụ blank) các liên kết sẽ mở trong cùng một tab.

— SharkofMirkwood

6

Mẹo: hãy chú ý đến lỗ hổng do _blank. Thêm thông tin trung bình.com / @ jitbit / từ

— Aistis

1

Một trang khác có lỗ hổng mathiasbynens.github.io/rel-noopener mà nó là một ví dụ của chính nó.

— PhoneixS

99

Sử dụng một trong những theo yêu cầu của bạn.

Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới:

 <a href="xyz.html" target="_blank"> Link </a>

Mở tài liệu được liên kết trong cùng một khung khi nó được bấm (đây là mặc định):

 <a href="xyz.html" target="_self"> Link </a>

Mở tài liệu được liên kết trong khung cha:

 <a href="xyz.html" target="_parent"> Link </a>

Mở tài liệu được liên kết trong toàn bộ cửa sổ:

 <a href="xyz.html" target="_top"> Link </a>

Mở tài liệu được liên kết trong một khung có tên:

 <a href="xyz.html" target="framename"> Link </a>

Xem MDN

— Người học luôn
nguồn

Cảm ơn vì thông tin. Làm thế nào để mở liên kết trong tab mới khi nhấp vào?

— Shajeel Afzal

Sử dụng mã trong html, như được chia sẻ ở trên. Hầu hết các trình duyệt mới mở các liên kết trong một tab mới theo mặc định khi bạn sử dụng target = "_ blank"

— Người học luôn luôn

1

Hãy nhớ rằng target="_blank"có một lỗ hổng, bạn có thể đọc về nó trong mathiasbynens.github.io/rel-noopener

— PhoneixS

36

Nếu bạn muốn thực hiện lệnh một lần cho toàn bộ trang web của mình, thay vì phải thực hiện sau mỗi liên kết. Hãy thử địa điểm này trong Đầu trang web và lô tô của bạn.

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

hi vọng điêu nay co ich

— Cyberquill
nguồn

3

đừng quên thêm rel = "noopener noreferrer"

— Philosopher Blundering 19/1/19

13

Sử dụng target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>

— Evan Hahn
nguồn

3

đừng quên thêm rel = "noopener noreferrer"

— Philosopher Blundering 19/1/19

6

Khi nào nên sử dụng target='_blank':

Phiên bản HTML (Một số thiết bị không hỗ trợ):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

Phiên bản JavaScript cho tất cả các thiết bị:

Việc sử dụng rel = "bên ngoài" là hoàn toàn hợp lệ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

và đối với Jquery có thể thử với cách dưới đây:

$("#content a[href^='http://']").attr("target","_blank");

Nếu cài đặt trình duyệt không cho phép bạn mở trong các cửa sổ mới:

href = "google.com";
onclick="window.open (this.href, ''); return false";

— Kaleem Ullah
nguồn

1

đừng quên thêm rel = "noopener noreferrer"

— Philosopher Blundering 19/1/19

6

target="_blank"thuộc tính sẽ làm công việc. Chỉ cần đừng quên thêm rel="noopener noreferrer"để giải quyết lỗ hổng tiềm năng. Thông tin thêm về điều đó tại đây: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>

— P
nguồn

Một lời giải thích khác về lỗ hổng ở đây: mathiasbynens.github.io/rel-noopener

— Nhà triết học thừa thãi

2

Bạn có thể dùng:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

Tuy nhiên, những điều trên làm cho trang web của bạn dễ bị tấn công lừa đảo. Bạn có thể ngăn điều đó xảy ra trong một số trình duyệt bằng cách thêm rel = "noopener noreferrer" vào liên kết của bạn. Với điều này được thêm vào, ví dụ trên trở thành:

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>

kiểm tra để biết thêm thông tin: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

— Thabang
nguồn

0

Bạn có thể làm như thế này:

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

Đồng thời xem url sau trên MDN để biết thêm thông tin về bảo mật và quyền riêng tư:

https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/a#Security_and_privacy

đến lượt nó có một liên kết đến một bài viết hay có tên Target = "_ blank" - lỗ hổng bị đánh giá thấp nhất từ trước đến nay :

https://www.jitbit.com/alexblog/256-targetblank---the- most-underestimated-vulnerability-ever/

— darmis
nguồn