Pertanyaan Buka URL di tab baru (dan bukan jendela baru) menggunakan JavaScript


Saya mencoba membuka URL di tab baru, dibandingkan dengan jendela munculan. Saya telah melihat pertanyaan terkait di mana tanggapan akan terlihat seperti ini:

window.open(url,'_blank');
window.open(url);

Tetapi tidak satupun dari mereka bekerja untuk saya, browser masih mencoba membuka jendela popup.


1588
2018-02-05 15:52


asal


Jawaban:


Tidak ada yang dapat dilakukan oleh seorang penulis dapat memilih untuk membuka di tab baru daripada jendela baru. Ini adalah sebuah preferensi pengguna.

CSS3 diusulkan target-baru, tapi spesifikasi itu ditinggalkan.

Itu membalikkan tidak benar; dengan menentukan dimensi untuk jendela dalam argumen ketiga window.open, Anda dapat memicu jendela baru ketika preferensi untuk tab.


699
2018-02-05 15:53



Ini tipuan,

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

Dalam banyak kasus, ini harus terjadi secara langsung di onclick handler untuk tautan untuk mencegah pemblokir pop-up, dan perilaku "jendela baru" default. Anda bisa melakukannya dengan cara ini, atau dengan menambahkan pendengar acara ke Anda DOM obyek.

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript-196/


1256
2017-07-08 14:49



window.open() tidak akan terbuka di tab baru jika tidak terjadi pada peristiwa klik yang sebenarnya. Dalam contoh yang diberikan, URL sedang dibuka di acara klik yang sebenarnya. Ini akan bekerja asalkan pengguna memiliki pengaturan yang sesuai di browser.

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

Demikian pula, jika Anda mencoba melakukan panggilan Ajax dalam fungsi klik dan ingin membuka jendela pada keberhasilan, pastikan Anda melakukan panggilan Ajax dengan async : false set pilihan.


315
2017-10-31 13:15



window.open Tidak Dapat Diandalkan Buka Popup di Tab Baru di Semua Browser

Browser yang berbeda menerapkan perilaku  window.open  dengan cara yang berbeda, terutama yang berkaitan dengan preferensi browser pengguna. Anda tidak dapat mengharapkan perilaku yang sama untuk window.open untuk menjadi kenyataan di semua Internet Explorer, Firefox, dan Chrome, karena cara yang berbeda-beda di mana mereka menangani preferensi browser pengguna.

Misalnya, pengguna Internet Explorer (11) dapat memilih untuk membuka munculan di jendela baru atau tab baru, Anda tidak dapat memaksa pengguna Internet Explorer 11 untuk membuka popup dengan cara tertentu  window.open, seperti yang disinggung Jawaban Quentin.

Adapun pengguna Firefox (29), menggunakan window.open(url, '_blank')  tergantung pada preferensi tab browser mereka, meskipun Anda masih dapat memaksa mereka untuk membuka munculan di jendela baru dengan menentukan lebar dan tinggi (lihat bagian "Apa Tentang Chrome?" di bawah).

Demonstrasi

Pergi ke pengaturan browser Anda dan konfigurasikan untuk membuka popup di jendela baru.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Halaman Tes

Setelah mengatur Internet Explorer (11) untuk membuka popup di jendela baru seperti yang ditunjukkan di atas, gunakan halaman pengujian berikut untuk menguji window.open:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Amati bahwa popup dibuka di jendela baru, bukan tab baru.

Anda juga dapat menguji cuplikan tersebut di Firefox (29) dengan preferensi tab yang diatur ke jendela baru, dan melihat hasil yang sama.

Apa Tentang Chrome? Itu Menerapkan window.open Berbeda dari Internet Explorer (11) dan Firefox (29).

Saya tidak 100% yakin, tetapi sepertinya Chrome (versi 34.0.1847.131 m) tampaknya tidak memiliki pengaturan apa pun yang dapat digunakan pengguna untuk memilih apakah akan membuka popup di jendela baru atau tab baru (seperti Firefox dan Internet Explorer). Saya sudah memeriksanya dokumentasi Chrome untuk mengelola munculan, tetapi tidak menyebutkan apa-apa tentang hal semacam itu.

Juga, sekali lagi, browser yang berbeda tampaknya menerapkan perilaku  window.open  berbeda. Di Chrome dan Firefox, menentukan lebar dan tinggi akan memaksa munculan, bahkan ketika seorang pengguna telah mengatur Firefox (29) untuk membuka jendela baru di tab baru (seperti yang disebutkan dalam jawaban atas JavaScript terbuka di jendela baru, bukan tab):

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

Namun, potongan kode yang sama di atas akan selalu membuka tab baru di Internet Explorer 11 jika pengguna mengatur tab sebagai preferensi peramban mereka, bahkan tidak menentukan lebar dan tinggi akan memaksa popup jendela baru untuk mereka.

Jadi perilaku window.open di Chrome tampaknya membuka munculan di tab baru bila digunakan dalam onclick acara, untuk membukanya di jendela baru saat digunakan dari konsol browser (sebagaimana dicatat oleh orang lain), dan membukanya di jendela baru bila ditentukan dengan lebar dan tinggi.

Ringkasan

Browser yang berbeda menerapkan perilaku  window.open  berbeda sehubungan dengan preferensi browser pengguna. Anda tidak dapat mengharapkan perilaku yang sama untuk window.open untuk menjadi kenyataan di semua Internet Explorer, Firefox, dan Chrome, karena cara yang berbeda-beda di mana mereka menangani preferensi browser pengguna.

Bacaan Tambahan


224
2018-05-01 19:42



Satu liner:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

atau

Dengan jQuery Saya menggunakan yang ini:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

Ini menciptakan virtual a elemen, berikan target="_blank" sehingga terbuka di tab baru, berikan dengan benar url  href dan kemudian mengkliknya.

Dan jika Anda mau, berdasarkan itu Anda dapat membuat beberapa fungsi:

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

lalu Anda dapat menggunakannya seperti:

openInNewTab("http://google.com");

Untuk sebuah non-jQuery skenario, fungsi akan terlihat seperti ini:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

136
2018-02-06 20:35



Untuk menguraikan jawaban Steven Spielberg, saya melakukan ini dalam kasus seperti ini:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

Dengan cara ini, tepat sebelum browser akan mengikuti tautan saya menyetel atribut target, sehingga tautan akan terbuka di tab atau jendela baru (tergantung pada pengaturan pengguna).


55
2018-04-05 15:02



Jika Anda menggunakan window.open(url, '_blank'), itu akan diblokir (pemblokir popup) di Chrome.

Coba ini:

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

51
2018-05-28 16:43



Saya menggunakan yang berikut ini dan ini bekerja dengan sangat baik !!!

window.open(url, '_blank').focus();

29
2018-03-11 11:51



Fakta yang menarik adalah bahwa tab baru tidak dapat dibuka jika tindakan tidak diminta oleh pengguna (mengklik tombol atau sesuatu) atau jika tidak asinkron, misalnya, ini TIDAK akan terbuka di tab baru:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Tetapi ini dapat dibuka di tab baru, tergantung pada pengaturan browser:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

14
2017-10-18 12:35



Saya pikir Anda tidak bisa mengendalikan ini. Jika pengguna telah mengatur browser mereka untuk membuka tautan di jendela baru, Anda tidak dapat memaksa ini untuk membuka tautan di tab baru.

JavaScript terbuka di jendela baru, bukan tab


13
2018-02-05 15:55