Bagaimana cara membuka tautan di tab baru pada html?

390

Saya sedang mengerjakan proyek HTML, dan saya tidak bisa menemukan cara membuka tautan di tab baru tanpa javascript.

Saya sudah tahu bahwa <a href="http://www.WEBSITE_NAME.com"></a>membuka tautan di tab yang sama. Ada ide bagaimana membuatnya terbuka di yang baru?

html hyperlink anchor browser-tab Pemrograman Zenthyx
sumber
40
gunakan<a href="url" target="_blank">...</a>
Rohit Agrawal
1
Seperti kata Rohit, tambahkan param target = "_ blank", bagaimanapun, di FireFox setidaknya jika Anda melakukan dua garis bawah target = "__ kosong" itu akan terbuka di tab baru, tetapi mengklik tautan lain menggunakan garis bawah ganda yang sama, membuka yang baru halaman di tab baru sebelumnya, artinya Anda hanya memiliki satu tab tambahan terbuka.
Justin Levene

Jawaban:

600

Setel atribut 'target' tautan ke _blank:

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

Edit: untuk contoh lain, lihat di sini: http://www.w3schools.com/tags/att_a_target.asp

(Catatan: Saya sebelumnya menyarankan blankalih-alih _blankkarena, jika digunakan, itu akan membuka tab baru dan kemudian menggunakan tab yang sama jika tautan diklik lagi. Namun, ini hanya karena, seperti yang ditunjukkan GolezTrol, ini merujuk pada nama dari bingkai / jendela, yang akan diatur dan digunakan ketika tautan ditekan lagi untuk membukanya di tab yang sama).

Pertimbangan Keamanan!

Hal rel="noopener noreferrer"ini untuk mencegah tab yang baru dibuka agar dapat memodifikasi tab asli secara jahat. Untuk informasi lebih lanjut tentang kerentanan ini, lihat sumber daya ini:

SharkofMirkwood
sumber
16
Semua target khusus dimulai dengan garis bawah. blankakan menjadi nama bingkai atau jendela. Tampaknya ini berfungsi, karena jendela atau tab baru mungkin akan dibuka ketika tidak ada yang namanya 'kosong', tetapi klik kedua pada tautan itu akan membuka halaman di tab yang sama lagi alih-alih membuka yang lain lagi.
GolezTrol
2
Yah, kurasa itu tidak valid, hanya saja berbeda. Alih-alih blankAnda bisa menggunakan juga foo, saya pikir, sementara _blanksebenarnya memiliki makna khusus. Saya tidak dapat menemukan informasi untuk membuktikan sebaliknya. Bisakah kamu?
GolezTrol
2
@Stefan Tidak, _blankakan baik-baik saja; masing-masing tautan akan terbuka di tab yang berbeda. Jika Anda menentukan nama tanpa garis bawah, (misalnya blank) tautan akan terbuka di tab yang sama.
SharkofMirkwood
6
Kiat: perhatikan kerentanan karena _blank. Info lebih lanjut medium.com/@jitbit/…
Aistis
1
Halaman lain dengan kerentanan mathiasbynens.github.io/rel-noopener yang merupakan contoh dengan sendirinya.
PhoneixS
99

Gunakan salah satunya sesuai kebutuhan Anda.

Buka dokumen yang ditautkan di jendela atau tab baru:

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

Buka dokumen yang ditautkan dalam bingkai yang sama seperti yang diklik (ini default):

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

Buka dokumen yang ditautkan dalam bingkai induk:

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

Buka dokumen yang ditautkan di seluruh jendela:

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

Buka dokumen yang ditautkan dalam bingkai bernama:

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

Lihat MDN

Pelajar Selalu
sumber
Terima kasih untuk informasi. Bagaimana cara membuka tautan di tab baru ketika diklik?
Shajeel Afzal
Gunakan kode dalam html, seperti yang dibagikan di atas. Sebagian besar browser baru membuka tautan di tab baru secara default saat Anda menggunakan target = "_ blank"
Learner Always
1
Ada dalam pikiran yang target="_blank"memiliki kerentanan, Anda dapat membacanya di mathiasbynens.github.io/rel-noopener
PhoneixS
36

Jika Anda ingin membuat perintah sekali untuk seluruh situs Anda, alih-alih harus melakukannya setelah setiap tautan. Coba tempat ini di dalam Kepala situs web Anda dan bingo.

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

semoga ini membantu

Cyberquill
sumber
3
jangan lupa untuk menambahkan rel = "noopener noreferrer"
Blundering Philosopher
13

Gunakan target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Evan Hahn
sumber
3
jangan lupa untuk menambahkan rel = "noopener noreferrer"
Blundering Philosopher
6

Kapan harus menggunakan target='_blank':

Versi HTML (Beberapa perangkat tidak mendukungnya):

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

Versi JavaScript untuk semua Perangkat:

Penggunaan rel = "eksternal" sangat valid

<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>

dan untuk Jquery dapat mencoba yang di bawah ini:

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

Jika pengaturan browser tidak memungkinkan Anda untuk membuka di windows baru:

href = "google.com";
onclick="window.open (this.href, ''); return false";
Kaleem Ullah
sumber
1
jangan lupa untuk menambahkan rel = "noopener noreferrer"
Blundering Philosopher
6

target="_blank"atribut akan melakukan pekerjaan itu. Hanya saja, jangan lupa menambahkan rel="noopener noreferrer"untuk memecahkan kerentanan potensial. Lebih lanjut tentang itu di sini: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>
Vadym P
sumber
Penjelasan lain dari kerentanan di sini: mathiasbynens.github.io/rel-noopener
Blundering Philosopher
2

Kamu bisa menggunakan:

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

Namun hal di atas membuat situs Anda rentan terhadap serangan phising. Anda dapat mencegahnya terjadi di beberapa browser dengan menambahkan rel = "noopener noreferrer" ke tautan Anda. Dengan ini ditambahkan, contoh di atas menjadi:

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

lihat untuk informasi lebih lanjut: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Thabang
sumber
0

Anda bisa melakukannya seperti ini:

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

Lihat juga url berikut di MDN untuk informasi lebih lanjut tentang keamanan dan privasi:

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

yang pada gilirannya memiliki tautan ke artikel bagus bernama Target = "_ blank" - kerentanan yang paling diremehkan :

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

darmis
sumber