Domanda Apri un URL in una nuova scheda (e non una nuova finestra) utilizzando JavaScript


Sto cercando di aprire a URL in una nuova scheda, al contrario di una finestra popup. Ho visto domande correlate in cui le risposte avrebbero avuto un aspetto simile:

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

Ma nessuno di loro ha funzionato per me, il browser ha comunque provato ad aprire una finestra popup.


1586
2018-02-05 15:52


origine


risposte:


Nulla di ciò che può fare un autore può scegliere di aprire in una nuova scheda invece di una nuova finestra. È un preferenza dell'utente.

CSS3 proposto target-new, ma la specifica è stata abbandonata.

Il inverso non è vero; specificando le dimensioni per la finestra nel terzo argomento di window.open, puoi attivare una nuova finestra quando la preferenza è per le schede.


698
2018-02-05 15:53



Questo è un trucco,

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

Nella maggior parte dei casi, questo dovrebbe accadere direttamente nel onclick gestore per il collegamento per impedire i blocchi pop-up e il comportamento predefinito "nuova finestra". Potresti farlo in questo modo, o aggiungendo un listener di eventi al tuo DOM oggetto.

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

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


1254
2017-07-08 14:49



window.open() non si aprirà in una nuova scheda se non sta accadendo sull'effettivo evento click. Nell'esempio dato l'URL viene aperto sull'evento di clic effettivo. Questo funzionerà se l'utente ha le impostazioni appropriate nel browser.

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

Allo stesso modo, se stai provando a fare una chiamata Ajax con la funzione click e vuoi aprire una finestra sul successo, assicurati di fare la chiamata Ajax con il async : false set di opzioni.


315
2017-10-31 13:15



window.open Impossibile aprire in modo affidabile i popup in una nuova scheda in tutti i browser

Browser diversi implementano il comportamento di  window.open  in modi diversi, soprattutto per quanto riguarda le preferenze del browser di un utente. Non puoi aspettarti lo stesso comportamento per window.open per essere vero su Internet Explorer, Firefox e Chrome, a causa dei diversi modi in cui gestiscono le preferenze del browser di un utente.

Ad esempio, gli utenti di Internet Explorer (11) possono scegliere di aprire i popup in una nuova finestra o in una nuova scheda, non è possibile forzare gli utenti di Internet Explorer 11 ad aprire popup in un determinato modo  window.open, come accennato in La risposta di Quentin.

Per quanto riguarda gli utenti di Firefox (29), utilizzando window.open(url, '_blank')  dipende dalle preferenze della scheda del browser, anche se puoi ancora forzarli ad aprire i popup in una nuova finestra specificando una larghezza e un'altezza (vedi la sezione "Che cosa è Chrome?" di seguito).

Dimostrazione

Vai alle impostazioni del tuo browser e configuralo per aprire i popup in una nuova finestra.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Pagina di test

Dopo aver configurato Internet Explorer (11) per aprire i popup in una nuova finestra come illustrato sopra, utilizzare la seguente pagina di test per testare 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>

Osserva che i popup sono aperti in una nuova finestra, non una nuova scheda.

Puoi anche testare quei frammenti sopra in Firefox (29) con la sua scheda impostata su nuove finestre e vedere gli stessi risultati.

Che dire di Chrome? Implementa window.open A differenza di Internet Explorer (11) e Firefox (29).

Non sono sicuro al 100%, ma sembra Chrome (versione 34.0.1847.131 m) non sembra avere impostazioni che l'utente può utilizzare per scegliere se aprire o meno i popup in una nuova finestra o in una nuova scheda (come Firefox e Internet Explorer). Ho controllato la documentazione di Chrome per la gestione dei popup, ma non ha menzionato nulla su quel genere di cose.

Anche, ancora una volta, diversi browser sembrano implementare il comportamento di  window.open  in modo diverso. In Chrome e Firefox, specificando una larghezza e altezza si forza un popup, anche quando un utente ha impostato Firefox (29) per aprire nuove finestre in una nuova scheda (come indicato nelle risposte a JavaScript si apre in una nuova finestra, non in una scheda):

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

Tuttavia, lo stesso snippet di codice sopra aprirà sempre una nuova scheda in Internet Explorer 11 se gli utenti impostano le schede come preferenze del browser, nemmeno la specifica della larghezza e dell'altezza costringerà a una nuova finestra popup per loro.

Quindi il comportamento di window.open in Chrome sembra essere quello di aprire popup in una nuova scheda quando viene utilizzato in un onclick evento, per aprirli in nuove finestre quando vengono utilizzati dalla console del browser (come notato da altre persone) e per aprirli in nuove finestre quando specificato con larghezza e altezza.

Sommario

Browser diversi implementano il comportamento di  window.open  in modo diverso per quanto riguarda le preferenze del browser degli utenti. Non puoi aspettarti lo stesso comportamento per window.open per essere vero su Internet Explorer, Firefox e Chrome, a causa dei diversi modi in cui gestiscono le preferenze del browser di un utente.

Letture aggiuntive


224
2018-05-01 19:42



Una fodera:

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

o

Con jQuery Sto usando questo:

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

Crea un virtuale a elemento, lo dà target="_blank" quindi si apre in una nuova scheda, lo rende corretto url  href e poi fa clic.

E se vuoi, basandoti su quello puoi creare qualche funzione:

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

e quindi puoi usarlo come:

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

Per un non jQuery scenario, la funzione sarebbe simile a questa:

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



Per elaborare la risposta di Steven Spielberg, l'ho fatto in questo caso:

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

In questo modo, appena prima che il browser segua il collegamento, sto impostando l'attributo target, quindi renderà il collegamento aperto in una nuova scheda o finestra (dipende dalle impostazioni dell'utente).


55
2018-04-05 15:02



Se usi window.open(url, '_blank'), sarà bloccato (blocco popup) su Chrome.

Prova questo:

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

51
2018-05-28 16:43



Io uso il seguente e funziona molto bene !!!

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

29
2018-03-11 11:51



Un fatto interessante è che la nuova scheda non può essere aperta se l'azione non viene invocata dall'utente (facendo clic su un pulsante o qualcosa del genere) o se è asincrona, ad esempio, questa NON si aprirà in una nuova scheda:

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

Ma questo potrebbe aprirsi in una nuova scheda, a seconda delle impostazioni del browser:

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

14
2017-10-18 12:35