Bagaimana saya bisa membuka link di jendela baru?

94

Saya memiliki penangan klik untuk tautan tertentu, di dalamnya saya ingin melakukan sesuatu yang mirip dengan berikut ini:

window.location = url

Saya memerlukan ini untuk benar-benar membuka url di jendela baru, bagaimana cara melakukannya?

Chris
sumber

Jawaban:

204

Anda bisa menyukai:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

Anda juga dapat menyetel targetke _blanksebenarnya.

Sarfraz
sumber
tetapi kode jquery ini tidak akan mengarah ke target secara otomatis
Amr Elgarhy
26
_blank adalah target default, jadi menggunakan window.open (url) sudah cukup
themerlinproject
Tidak yakin akan membantu dan bukan masalah yang persis sama tetapi saya sedang mencari solusi yang sama untuk mengunduh file (bukan dari tautan tetapi tombol) dan di Chrome jendela tidak terbuka dan tidak ada unduhan sampai saya hanya mengubah ke window.location = 'url' yang tidak mengubah lokasi tetapi mengunduh file ...
gdoumenc
window.open (url) baik-baik saja :)
fudu
33

Berikut cara memaksa target di dalam handler klik:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});
chadwackerman.dll
sumber
5
Tidak perlu menggunakan jQuery selector di click handler sehingga baris $(this).attr('target', '_blank'); bisa diubah menjadi this.target = "_blank";Juga, jika tautan jangkar pada halaman dapat dimodifikasi untuk memiliki rel="external"atribut maka Anda dapat membuat penangan klik global untuk halaman dengan selektor jQuery a[rel="external"]daripada memiliki klik penangan per tautan yang dipilih dengana#link_id
himanshu
17

Anda perlu menggunakan window.open(url);

referensi:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Amr Elgarhy
sumber
5
Astaga! Jangan gunakan atau tautkan ke w3schools, TIDAK terkait dengan W3C. Gunakan MDN sebagai gantinya: developer.mozilla.org/en-US/docs/Web/API/Window.open
AB Carroll
5
w3sekolah bagus (abaikan 'beberapa' troll w3c) ... akan terus menjadi sumber otoritatif ... bahkan w3c sekarang mendukungnya lagi ;-)
Dawesi
4

Anda juga bisa menggunakan metode jquery prop () untuk ini.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 
Usha
sumber
2

Saya baru saja menemukan solusi menarik untuk masalah ini. Saya membuat span yang berisi informasi berdasarkan pengembalian dari layanan web. Saya berpikir untuk mencoba meletakkan link di sekitar span sehingga jika saya mengkliknya, "a" akan menangkap klik tersebut.

Tetapi saya mencoba menangkap klik dengan span ... jadi saya berpikir mengapa tidak melakukan ini saat saya membuat span.

var span = $('<span id="something" data-href="'+url+'" />');

Saya kemudian mengikat handler klik ke span yang membuat tautan berdasarkan atribut 'data-href':

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

Ini berhasil memungkinkan saya untuk mengklik span dan membuka jendela baru dengan url yang sesuai.

Dramoth
sumber
1

Ada apa dengan <a href="myurl.html" target="_blank">My Link</a>? Tidak perlu Javascript ...

Michaja Broertjes
sumber
1

solusi ini juga mempertimbangkan kasus url kosong dan menonaktifkan (abu-abu) tautan kosong.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Scott 混合 理论
sumber
0

Berhati-hatilah jika Anda ingin menjalankan permintaan AJAX di dalam fungsi penanganan kejadian untuk kejadian klik. Untuk beberapa alasan Chrome (dan mungkin browser lain) tidak akan membuka tab / jendela baru.

pengguna2618825
sumber
0

Ini bukan perbaikan yang sangat bagus tetapi berhasil:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Contoh langsung: http://jsfiddle.net/7eRLb/

adriandorin
sumber
0

Microsoft IE tidak mendukung nama sebagai argumen kedua.

window.open('url', 'window name', 'window settings');

Masalahnya adalah window name. Ini akan berhasil:

window.open('url', '', 'window settings')

Microsoft hanya mengizinkan argumen berikut, Jika menggunakan argumen itu sama sekali:

  • _kosong
  • _media
  • _induk
  • _Cari
  • _diri
  • _puncak

Periksa situs Microsoft ini

dhanesh sr
sumber
4
-1: Salinan / tempel Anda yang melanggar lisensi dari stackoverflow.com/a/1462500/560648 meskipun demikian, itu tidak benar. Argumen itu didukung . Itu tidak boleh berisi spasi atau tanda hubung atau tanda baca lainnya. Baca jawaban dan komentar lain tentang pertanyaan itu.
Balapan Ringan di Orbit