Chrome, Javascript, window.open in una nuova scheda


110

In Chrome si apre in una nuova scheda:

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

si apre in una nuova finestra (ma vorrei che si aprisse anche in una nuova scheda:

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

È fattibile?


2
Sei sicuro di quello che affermi? Entrambi i frammenti hanno lo stesso risultato.
Denys Séguret

1
Se una finestra si apre in una scheda o una nuova finestra dipende dal browser locale e dal modo in cui l'utente configura il proprio browser - non è qualcosa che puoi specificare in javascript.
jfriend00

Risposte:


150

Non puoi controllarlo direttamente, perché è un'opzione controllata dagli utenti di Internet Explorer.

L'apertura di pagine utilizzando Window.open con un nome di finestra diverso si aprirà in una nuova finestra del browser come un popup, OPPURE si aprirà in una nuova scheda, se l'utente ha configurato il browser per farlo.

MODIFICARE:

Una spiegazione più dettagliata:

1. Nei browser moderni, window.open si aprirà in una nuova scheda anziché in un popup.

2. È possibile forzare un browser a utilizzare una nuova finestra ("popup") specificando le opzioni nel 3 ° parametro

3. Se la chiamata window.open non faceva parte di un evento avviato dall'utente, verrà aperta in una nuova finestra.

4. Un "evento avviato dall'utente" non deve avere la stessa chiamata di funzione, ma deve avere origine nella funzione invocata da un clic dell'utente

5. Se un evento avviato da un utente delega o rinvia una chiamata di funzione (in un listener di eventi o un delegato non associato all'evento clic, o utilizzando setTimeout ad esempio), perde il suo stato di "avviato dall'utente"

6. Alcuni blocchi popup consentiranno l'apertura di finestre da eventi avviati dall'utente, ma non quelle aperte in altro modo.

7. Se un popup viene bloccato, a volte verranno bloccati anche quelli normalmente consentiti da un blocco (tramite eventi avviati dall'utente). Qualche esempio…

Forzare l'apertura di una finestra in una nuova istanza del browser, invece che in una nuova scheda:

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

Quanto segue si qualifica come evento avviato dall'utente, anche se chiama un'altra funzione:

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

Quanto segue non si qualifica come evento avviato dall'utente, poiché setTimeout lo differisce:

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

2
Voglio solo aggiungere che testando in Chrome e FF ho ​​scoperto che l'utilizzo di window.open in quello che definisci come un "evento avviato dall'utente" mantiene l'azione predefinita del browser. Con questo intendo che se in Chrome tieni premuto il tasto Maiusc su Chrome e fai clic, apparirà una nuova finestra del browser, se tieni premuto ctrl (o premi il pulsante centrale del mouse) si aprirà una nuova scheda in background. Il che è molto carino, puoi fare alcune cose senza dover posizionare tag di ancoraggio ovunque.
Hoffmann

3
"Se la chiamata window.open non faceva parte di un evento avviato dall'utente, verrà aperta in una nuova finestra." No, quasi certamente non verrà aperto affatto.
TJ Crowder

3
A partire dal 29/9/2014, gli ultimi Firefox ESR e IE 11 aprono i collegamenti _blank o window.open in una nuova finestra quando le chiamate js utilizzano _blank come nome della finestra. L'attuale Chrome non è così semplice. Ho provato ad aprire una nuova finestra passando in alto, a sinistra, larghezza, altezza, barra degli strumenti, posizione, directory, stato, barra dei menu, barre di scorrimento e ridimensionabile e omettendo ciascuna di esse a turno. Chrome li ha aperti tutti in una nuova scheda tranne quando lo stato, la barra dei menu o le barre di scorrimento sono stati omessi. Sembra così arbitrario che è difficile crederlo, ma empiricamente è quello che è successo. Esempio qui: jsbin.com/mobiyeqojaha/1
enigment

34

A volte è utile forzare l'uso di una scheda, se all'utente piace. Come Prakash ha affermato sopra, a volte questo è dettato dall'uso di un evento non avviato dall'utente, ma ci sono modi per aggirare questo.

Per esempio:

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

aprirà sempre "newurl" in una nuova finestra del browser poiché la funzione "sempre" non è considerata avviata dall'utente. Tuttavia, se lo facciamo:

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

apriamo la nuova finestra del browser o creiamo la nuova scheda, come determinato dalla preferenza dell'utente nel clic del pulsante che è avviato dall'utente. Quindi impostiamo semplicemente la posizione sull'URL desiderato dopo essere tornati dal post AJAX. Voilà, forziamo l'uso di una scheda se all'utente piace.


Ho notato che se hai un punto di interruzione impostato in Chrome su window.open, il browser apre una nuova finestra. Lasciando che il codice non si interrompa sembra invece che venga aperta una nuova scheda.
skinnybrit51

È una soluzione alternativa a meno che il tuo window.open e il risultato della funzione non sia qualcosa che richiede 5/6/7 secondi circa. Considera se la funzione sta inviando dati a un server che sta generando un PDF che richiede 10 secondi. L'apertura di window.open su una scheda vuota è immediata e l'utente fissa la scheda vuota per 10 secondi finché non viene popolata magicamente. Sempre su iOS si tratta dell'unica soluzione.
Kevin Brown


11

Al momento (Chrome 39) utilizzo questo codice per aprire una nuova scheda:

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

Ovviamente questo potrebbe cambiare nelle versioni future di Chrome.

È una cattiva idea utilizzarlo se non puoi controllare il browser utilizzato dagli utenti. Potrebbe non funzionare nelle versioni future o con impostazioni diverse.


Secondo il commento di jfriend00, il modo in cui l'utente configura il browser determina come vengono aperte le nuove finestre, non il codice.
Lee Taylor

Sono d'accordo con te che è una cattiva idea fare affidamento su una soluzione del genere se non puoi controllare il tuo ambiente. Ma ci sono alcune situazioni in cui ciò è possibile (ad esempio lo uso in un'applicazione fornita con il suo Chrome portatile). Per chiarire questo ho modificato il mio anser.
Nico Wiedemann

2
Per coloro che si chiedono, l'esecuzione di questo frammento di codice non funziona a causa di questo errore: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

Questo aprirà il collegamento in una nuova scheda in Chrome e Firefox, e forse più browser che non ho testato:

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

Fondamentalmente apre una nuova scheda vuota e quindi imposta la posizione di quella scheda vuota. Attenzione che è una sorta di hack, dal momento che il comportamento della scheda / finestra del browser è davvero dominio, responsabilità e scelta del browser e dell'utente.

La seconda riga può essere chiamata in una richiamata (dopo aver eseguito alcune richieste AJAX, ad esempio), ma il browser non la riconoscerebbe come un evento clic avviato dall'utente e potrebbe bloccare il popup.


1
$windowè solo il modo in cui AngularJS usa window. Puoi semplicemente usare windowinvece. Maggiori informazioni: docs.angularjs.org/api/ng/service/$window
Magne

3

Chiara mini-soluzione $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()


0

Puoi utilizzare questo codice per aprire in una nuova scheda.

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

L'ho preso da stackoverflow ..


1
Funziona, ma solo se sei in un gestore di clic utente. Altrimenti, apre una nuova finestra (ma Firefox almeno ti bloccherà fino a quando l'utente non lo consente).
djsmith

@djsmith, sto usando questo .. e sto affrontando il problema solo in IE7. Se hai altre soluzioni suggerisci .. Grazie ..
Dilip Rajkumar

-2

Modo migliore che uso:

1- aggiungi il link al tuo html:

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

2- aggiungi la funzione JS:

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

3- chiama semplicemente la funzione OpenNewTab con il link che desideri

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.