Chrome, Javascript, window.open di tab baru


110

Di chrome, ini terbuka di tab baru:

<button onclick="window.open('newpage.html', '_blank')" />

ini terbuka di jendela baru (tapi saya ingin ini juga terbuka di tab baru:

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

Apakah ini layak?


2
Apakah Anda yakin tentang apa yang Anda tegaskan? Kedua fragmen tersebut memiliki hasil yang sama.
Denys Séguret

1
Apakah sebuah jendela terbuka di tab atau jendela baru tergantung pada browser lokal dan bagaimana pengguna mengkonfigurasi browser mereka - itu bukan sesuatu yang dapat Anda tentukan di javascript.
jfriend00

Jawaban:


150

Anda tidak dapat mengontrol ini secara langsung, karena ini adalah opsi yang dikontrol oleh pengguna Internet Explorer.

Membuka halaman menggunakan Window.open dengan nama jendela yang berbeda akan terbuka di jendela browser baru seperti popup, ATAU buka di tab baru, jika pengguna mengkonfigurasi browser untuk melakukannya.

EDIT:

Penjelasan yang lebih detail:

1. Di browser modern, window.open akan terbuka di tab baru, bukan di popup.

2. Anda dapat memaksa browser untuk menggunakan jendela baru ('popup') dengan menentukan opsi di parameter ke-3

3. Jika panggilan window.open bukan bagian dari acara yang dimulai pengguna, itu akan terbuka di jendela baru.

4. "Peristiwa yang dimulai oleh pengguna" tidak harus memiliki panggilan fungsi yang sama - tetapi harus berasal dari fungsi yang dipanggil oleh klik pengguna

5. Jika acara yang dimulai oleh pengguna mendelegasikan atau menolak panggilan fungsi (dalam event listener atau delegasi yang tidak terikat ke peristiwa klik, atau dengan menggunakan setTimeout misalnya), statusnya akan hilang sebagai "pengguna yang dimulai"

6. Beberapa pemblokir popup akan memungkinkan jendela dibuka dari acara yang dimulai pengguna, tetapi tidak yang dibuka sebaliknya.

7. Jika ada sembulan yang diblokir, yang biasanya diizinkan oleh pemblokir (melalui acara yang dimulai oleh pengguna) terkadang juga akan diblokir. Beberapa contoh…

Memaksa jendela untuk dibuka di browser baru, bukan di tab baru:

window.open('page.php', '', 'width=1000');

Hal berikut akan memenuhi syarat sebagai peristiwa yang dimulai oleh pengguna, meskipun memanggil fungsi lain:

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

Hal berikut tidak akan memenuhi syarat sebagai acara yang dimulai oleh pengguna, karena setTimeout menolaknya:

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);

2
Saya hanya ingin menambahkannya dengan mengujinya di Chrome dan FF. Saya menemukan bahwa menggunakan window.open dalam apa yang Anda definisikan sebagai "peristiwa yang dimulai oleh pengguna" mempertahankan tindakan default browser. Maksud saya jika di Chrome Anda menahan shift pada chrome dan klik jendela browser baru akan muncul, jika Anda menahan ctrl (atau menekan tombol tengah mouse) tab baru akan terbuka di latar belakang. Yang sangat bagus, Anda dapat membuat beberapa hal tanpa perlu menempatkan tag jangkar di mana-mana.
Hoffmann

3
"Jika panggilan window.open bukan bagian dari acara yang dimulai oleh pengguna, itu akan terbuka di jendela baru." Tidak, hampir pasti tidak akan dibuka sama sekali.
TJ Crowder

3
Mulai 29/9/2014, Firefox ESR dan IE 11 terbaru membuka tautan _blank atau window.open di jendela baru ketika panggilan js menggunakan _blank sebagai nama jendela. Chrome saat ini tidak sesederhana itu. Saya menguji membuka jendela baru melewati atas, kiri, lebar, tinggi, bilah alat, lokasi, direktori, status, batang menu, bilah gulir, dan ukuran, dan menghilangkan masing-masing secara bergantian. Chrome membuka semuanya di tab baru kecuali saat status, bilah menu, atau bilah gulir dihilangkan. Ini tampaknya begitu sewenang-wenang sehingga sulit dipercaya, tetapi secara empiris itulah yang terjadi. Contoh di sini: jsbin.com/mobiyeqojaha/1
enigment

34

Terkadang berguna untuk memaksa penggunaan tab, jika pengguna menyukainya. Seperti yang dinyatakan Prakash di atas, hal ini terkadang ditentukan oleh penggunaan acara yang tidak diprakarsai oleh pengguna, tetapi ada cara lain untuk mengatasinya.

Sebagai contoh:

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

akan selalu membuka "url baru" di jendela browser baru karena fungsi "selalu" tidak dianggap dimulai oleh pengguna. Namun, jika kita melakukan ini:

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

kita membuka jendela browser baru atau membuat tab baru, seperti yang ditentukan oleh preferensi pengguna di klik tombol yang dimulai oleh pengguna. Kemudian kita tinggal mengatur lokasi ke URL yang diinginkan setelah kembali dari posting AJAX. Voila, kami memaksa penggunaan tab jika pengguna menyukainya.


Saya perhatikan bahwa jika Anda memiliki titik jeda yang disetel di chrome di window.open maka browser membuka jendela baru. Membiarkan kode tidak rusak tampaknya menghasilkan tab baru yang dibuka.
skinnybrit51

Ini adalah solusi yang OK kecuali window.open Anda dan hasil dari fungsinya membutuhkan waktu 5/6/7 detik atau lebih. Pertimbangkan apakah fungsinya memposting data ke server yang menghasilkan PDF yang membutuhkan waktu 10 detik. Window.open ke tab kosong segera dan pengguna menatap tab kosong selama 10 detik sampai secara ajaib itu terisi. Masih di iOS, ini adalah satu-satunya solusi.
Kevin Brown


11

Saat ini (Chrome 39) saya menggunakan kode ini untuk membuka tab baru:

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

Tentu saja ini dapat berubah di versi Chrome yang akan datang.

Sebaiknya gunakan ini jika Anda tidak dapat mengontrol browser yang digunakan pengguna Anda. Ini mungkin tidak berfungsi di versi mendatang atau dengan pengaturan yang berbeda.


Sesuai komentar jfriend00, cara pengguna mengkonfigurasi browser menentukan bagaimana jendela baru dibuka, bukan kode.
Lee Taylor

Saya setuju dengan Anda, bahwa bergantung pada solusi seperti itu adalah ide yang buruk jika Anda tidak dapat mengontrol lingkungan Anda. Tetapi ada beberapa situasi di mana hal ini dimungkinkan (misalnya saya menggunakannya dalam aplikasi yang dikirimkan dengan Chrome portabelnya sendiri). Untuk memperjelas ini, saya mengedit anser saya.
Nico Wiedemann

2
Bagi mereka yang bertanya-tanya, menjalankan cuplikan kode ini tidak berfungsi karena kesalahan ini:VM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
Benjamin Crouzier

6

Ini akan membuka tautan di tab baru di Chrome dan Firefox, dan mungkin lebih banyak browser yang belum saya uji:

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

Ini pada dasarnya membuka tab kosong baru, dan kemudian mengatur lokasi tab kosong itu. Berhati-hatilah karena ini semacam peretasan, karena perilaku tab / jendela browser sebenarnya adalah domain, tanggung jawab, dan pilihan Browser dan Pengguna.

Baris kedua dapat dipanggil dalam panggilan balik (setelah Anda melakukan beberapa permintaan AJAX misalnya), tetapi kemudian browser tidak akan mengenalinya sebagai peristiwa klik yang dimulai oleh pengguna, dan dapat memblokir popup.


1
$windowhanyalah cara AngularJS menggunakan window. Anda bisa menggunakan windowsaja. Info lebih lanjut: docs.angularjs.org/api/ng/service/$window
Magne

3

Solusi mini yang jelas $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()


0

Anda dapat menggunakan kode ini untuk membuka di tab baru ..

function openWindow( url )
{
  window.open(url, '_blank');
  window.focus();
}

Saya mendapatkannya dari stackoverflow ..


1
Ini berfungsi, tetapi hanya jika Anda berada dalam handler klik pengguna. Jika tidak, ini akan membuka jendela baru (tetapi Firefox setidaknya akan memblokir Anda sampai pengguna mengizinkannya).
djsmith

@djsmith, saya menggunakan ini .. dan menghadapi masalah hanya di IE7. Jika Anda memiliki solusi lain, mohon saran .. Terima kasih ..
Dilip Rajkumar

-2

Cara terbaik yang saya gunakan:

1- tambahkan tautan ke html Anda:

<a id="linkDynamic" target="_blank" href="#"></a>

2- tambahkan fungsi JS:

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3- cukup panggil fungsi OpenNewTab dengan tautan yang Anda inginkan

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.