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

2102

Sto cercando di aprire un URL in una nuova scheda, al contrario di una finestra popup.

Ho visto domande correlate in cui le risposte sarebbero simili:

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

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

javascript 
— marchio
fonte
85
Di solito è una questione di preferenza. Ad alcune persone piace Windows (e protegge ferocemente questo comportamento), alcune schede (e ferocemente proteggono questo comportamento). Quindi sconfiggeresti un comportamento che è generalmente considerato una questione di gusti, non di design.
— Jared Farrish,
42
Javascript non sa nulla del tuo browser e delle schede rispetto a Windows, quindi spetta davvero al browser decidere come aprire una nuova finestra.
— Andrey,
3
Come posso configurare Chrome per visualizzarlo in una nuova scheda, anziché un popup?
— Segna il
8
Gmail lo fa in qualche modo, almeno in Chrome. Maiusc + clic su una riga e-mail e si apre quella e-mail in una nuova finestra. Ctrl + clic e lo apri in una nuova scheda. Unico problema: scavare nel codice offuscato di Gmail è un PITA
— Sergio,
48
@Sergio, questo è il comportamento predefinito del browser per qualsiasi collegamento. (Almeno per Chrome e Firefox.) Non ha nulla a che fare con Gmail.
— Qtax

Risposte:

929

Nulla che un autore possa fare può scegliere di aprire in una nuova scheda anziché in una nuova finestra; è una preferenza dell'utente . (Si noti che la preferenza dell'utente predefinita nella maggior parte dei browser è per le nuove schede, quindi un banale test su un browser in cui tale preferenza non è stata modificata non lo dimostrerà.)

CSS3 ha proposto un target nuovo , ma le specifiche sono state abbandonate .

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

— Quentin
fonte
42
@AliHaideri Il Javascript non ha nulla a che fare con l'apertura della nuova scheda / finestra. È tutto determinato dalle impostazioni del tuo browser. L'utilizzo window.opendice al browser di aprire qualcosa di nuovo, quindi il browser apre ciò che viene scelto nelle sue impostazioni: scheda o finestra. Nei browser con cui hai provato, modifica le impostazioni per aprirle in una nuova finestra anziché in una scheda e vedrai che le soluzioni degli altri sono sbagliate.
— Ian,
239
Due cose che sprecano il tempo di altre persone più che dire loro qualcosa non possono essere fatte. (1) Dire loro qualcosa che non può essere fatto può essere fatto. (2) Restare in silenzio e lasciarli continuare a cercare un modo per fare qualcosa che non si può fare.
— Quentin,
8
@Cupcake - La documentazione di solito non si preoccupa di descrivere funzionalità che non esistono. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/…
— Quentin
9
@Neel - Perché sinteticamente arriva al punto su un argomento che molte persone vogliono conoscere.
— Quentin,
4
Gli autori possono fare cose (principalmente scrivendo codice diverso). Nessuna di queste cose attiverà una scheda anziché una finestra.
— Quentin,
1734

Questo è un trucco 

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

Nella maggior parte dei casi, ciò dovrebbe accadere direttamente nel onclickgestore del collegamento per impedire i blocchi popup e il comportamento predefinito "nuova finestra". Puoi farlo in questo modo o aggiungendo un listener di eventi al tuo DOMoggetto. 

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

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

— Rinto George
fonte
117
Non funziona. Ho ricevuto un messaggio a destra della barra degli indirizzi: popup bloccato . Quindi ho permesso i popup. E voilà, si apre in un popup, non in una scheda ! Chrome 22.0.1229.94 su OS X Lion.
— nalply
39
@ b1naryatr0phy Questo perché in realtà non l'hai testato correttamente. Modifica le impostazioni nel tuo browser. Se è aperto in una scheda o finestra è determinato dalle impostazioni del browser. Non c'è niente che tu possa fare chiamando window.open (o qualsiasi Javascript) per scegliere come aprire la nuova finestra / scheda.
— Ian,
Domanda: ho impostato l'URL senza protocollo (ad esempio my.site.com/Controller/Index). Di conseguenza ottengo una nuova finestra (scheda) dall'URL, come l'URL della pagina corrente (da cui utilizzo la funzione OpenInNewTab) oltre a passare all'URL della funzione. Con la finestra del protocollo si apre tramite il collegamento corretto. Perché?
— user2167382,
2
var win = window.open (url, '_blank'); '_blank' non è necessario, per window.open () , il secondo parametro è strWindowName, per: un nome stringa per la nuova finestra. Il nome può essere utilizzato come destinazione di collegamenti e moduli utilizzando l'attributo target di un elemento <a> o <form>. Il nome non deve contenere caratteri di spazi bianchi. Si noti che strWindowName non specifica il titolo della nuova finestra.
— hydRAnger,
Esiste un modo per rendere aperta una nuova scheda senza che sia un iframe sandbox? Quando lo uso ottengo errori CORS perché il valore document.domain non viene modificato in quanto viene aperto come iframe.
— Ids van der Zee,
380

window.open()non si aprirà in una nuova scheda se non si sta verificando sull'evento clic reale. Nell'esempio fornito, l'URL viene aperto sull'evento clic effettivo. Funzionerà a condizione che l'utente abbia 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 si sta tentando di effettuare una chiamata Ajax all'interno della funzione clic e si desidera aprire una finestra in caso di successo, assicurarsi di eseguire la chiamata Ajax con l' async : falseopzione impostata.

— Venkat Kotra
fonte
28
Sarebbe bello contrassegnarlo come la risposta CORRETTA. I miei test con Chrome v26 (Windows) confermano che se il codice si trova all'interno del gestore di clic di un pulsante, apre una nuova scheda e se il codice viene invocato a livello di codice, ad esempio dalla console, allora si apre una nuova finestra.
— CyberFonic,
2
@Ian Dai miei test sui browser con impostazioni predefinite, questa risposta funziona nei casi in cui le risposte sopra non lo fanno. La risposta accettata che dice "non c'è niente che puoi fare" è vera solo quando l'utente ha modificato le impostazioni predefinite.
— Garfield,
@Ian Per motivi di chiarezza, l'ho menzionato nell'avviso di risposta relativo alle impostazioni dell'utente. "Funzionerà a condizione che l'utente abbia le impostazioni appropriate nel browser." Penso che la maggior parte degli utenti non cambi le impostazioni del browser e questa risposta funziona per la maggior parte di loro.
— Venkat Kotra,
async: falsenon funziona in Chrome. Per aprire una nuova finestra dal callback, è necessario prima aprire una finestra vuota prima di inviare la richiesta HTTP e successivamente aggiornarla. Ecco un buon trucco .
— attacomsian
250

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

Browser diversi implementano il comportamento window.open in modi diversi, in particolare per quanto riguarda le preferenze del browser dell'utente. Non puoi aspettarti che lo stesso comportamento window.opensia vero su tutto 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 i popup in un certo modo window.open , come indicato nella risposta di Quentin .

Per quanto riguarda gli utenti di Firefox (29), l'utilizzo window.open(url, '_blank') dipende dalle preferenze della scheda del browser, sebbene sia comunque possibile forzarli ad aprire i popup in una nuova finestra specificando larghezza e altezza (vedere la sezione "Che cos'è Chrome?" Di seguito).

Dimostrazione

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

Internet Explorer (11)

Finestra di dialogo delle impostazioni di Internet Explorer 1

Finestra di dialogo delle impostazioni della scheda Internet Explorer

Pagina di prova

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

Si noti che i popup vengono aperti in una nuova finestra, non in una nuova scheda.

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

Che dire di Chrome? Implementa window.opendiversamente da Internet Explorer (11) e Firefox (29).

Non sono sicuro al 100%, ma sembra che Chrome (versione 34.0.1847.131 m) non sembri avere alcuna impostazione 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 avere). Ho controllato la documentazione di Chrome per la gestione dei popup , ma non ha menzionato nulla di questo genere di cose.

Inoltre, ancora una volta, diversi browser sembrano implementare il comportamento in modo window.open diverso. In Chrome e Firefox, specificare una larghezza e un'altezza forzerà un popup, anche quando un utente ha impostato Firefox (29) per aprire nuove finestre in una nuova scheda (come menzionato nelle risposte a JavaScript, aprire 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 frammento di codice in alto aprirà sempre una nuova scheda in Internet Explorer 11 se gli utenti impostano le schede come preferenze del browser, nemmeno specificando una larghezza e un'altezza imporranno una nuova finestra popup per loro.

Quindi il comportamento di window.openChrome sembra essere quello di aprire i popup in una nuova scheda quando utilizzato in un onclickevento, di aprirli in nuove finestre quando utilizzati dalla console del browser ( come notato da altre persone ) e di aprirli in nuove finestre quando specificato con una larghezza e un'altezza.

Sommario

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

Letture aggiuntive

— Peter Mortensen
fonte
12
Non hai risposto alla domanda, hai appena dimostrato che window.open è incoerente.
— BentOnCoding
223

Una fodera:

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

Crea un aelemento virtuale , lo dà in target="_blank"modo che si apra in una nuova scheda, lo dia corretto url hrefe quindi lo fa clic.

E se vuoi, in base a ciò puoi creare alcune funzioni:

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

e quindi puoi usarlo come:

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

Nota importante:

openInNewTab(così come qualsiasi altra soluzione in questa pagina) deve essere chiamato durante la richiamata dell'azione dell'utente - ad es. all'interno dell'evento click (non necessario direttamente nella funzione di callback, ma durante l'azione click).

Se lo chiamerai manualmente in un momento casuale (ad es. Entro un intervallo o dopo la risposta del server), potrebbe essere bloccato dal browser (il che ha senso in quanto sarebbe un rischio per la sicurezza e potrebbe portare a un'esperienza utente molto scarsa )

— pie6k
fonte
8
Grazie. Il tuo pure-JS ha un pezzo mancante - come ha scritto Luke Alderton (vedi sotto), devi collegare l'elemento creato al corpo del documento, nel tuo codice è sospeso nel vuoto e almeno in Firefox 37 non fa nulla .
— Greenoldman,
4
@mcginniwa Qualsiasi azione come questa - se non attivata da un'azione dell'utente come il clic del mouse, bloccherà il blocco dei popup. Immagina di poter aprire qualsiasi URL con Javascript senza l'intervento dell'utente: sarebbe piuttosto pericoloso. Se metti questo codice all'interno di un evento come la funzione click - funzionerà benissimo - è lo stesso con tutte le soluzioni proposte qui.
— pie6k
4
Puoi semplificare il tuo codice come segue: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
— shaedrich,
5
@shaedrich ispirato al tuo frammento Ho aggiunto una sola Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— riga
Non funziona in FF!
— Nolesh,
91

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

Prova questo:

//With JQuery

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

Con puro JavaScript,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
— Mohammed Safeer
fonte
Ma in questa domanda, non menzionano l'autore del sito. Voglio solo aprire un URL in una nuova finestra o nuova scheda. Questo dipende dal browser. Non dobbiamo preoccuparci dell'autore. Si prega di controllare quel violino. Funziona
— Mohammed Safeer,
Si è scoperto che, non ha funzionato su js fiddle e plunker, ma funziona quando si crea un file html. È perché js fiddle, l'output viene visualizzato su iframe, quindi la nuova finestra è bloccata a causa dithe request was made in a sandboxed frame whose 'allow-popups' permission is not set
— Mohammed Safeer
67

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

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

In questo modo, poco prima che il browser segua il link Sto impostando l'attributo target, quindi aprirà il link in una nuova scheda o finestra ( dipende dalle impostazioni dell'utente ).

Un esempio di riga in jQuery:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

Ciò può essere realizzato anche utilizzando anche le API DOM del browser nativo:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
— arikfr
fonte
58

Uso quanto segue e funziona molto bene!

window.open(url, '_blank').focus();
— Ezequiel García
fonte
2
Questo potrebbe aprirsi in una nuova scheda o finestra a seconda delle impostazioni del browser. La domanda riguarda in particolare l'apertura in una nuova scheda anche se le preferenze sono per una nuova finestra.
— Quentin,
19

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) o se è asincrona, ad esempio, NON si aprirà in una nuova scheda:

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

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

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
— karaxuna
fonte
2
Questo viene bloccato come popup in Firefox 28, Chrome 34b e Safari 7.0.2, tutte le impostazioni di magazzino. :(
— Steve Meisner,
1
"la nuova scheda non può essere aperta se l'azione non viene invocata dall'utente (facendo clic su un pulsante o qualcosa) o se è asincrona" - vero per Chrome, ma non vero per tutti i browser. Salvare <script>open('http://google.com')</script>in un .htmlfile e aprirlo con una nuova installazione di una versione recente di Firefox; noterai che Firefox apre felicemente Google in una nuova scheda (forse dopo che gli hai detto di consentire i popup), non una nuova finestra.
— Mark Amery,
13

Se si omettono i parametri [strWindowFeatures] si aprirà una nuova scheda, A MENO CHE l'impostazione del browser abbia la precedenza (l'impostazione del browser supera JavaScript).

Nuova finestra

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

Nuova scheda

var myWin = window.open(strUrl, strWindowName);

-- o --

var myWin = window.open(strUrl);
— MannyC
fonte
11 
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
— spirinvladimir
fonte
11

Puoi usare un trucco con form:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

Demo jsFiddle

— CodeNinja
fonte
4
Se segui questo metodo, assicurati che l'URL non abbia parametri di query perché verranno ignorati dall'invio del modulo. Una soluzione è incorporare elementi di input nascosti all'interno dell'elemento modulo che hanno namecome chiave e valuecome valore tutti i parametri all'interno dei parametri della query. E poi invia il modulo
— Mudassir Ali,
questo può essere fatto più semplicemente con un atag invece che con un modulo e usando il .click()metodo jQuery per "inviarlo". controlla la mia risposta
10

Ciò non ha nulla a che fare con le impostazioni del browser se si sta tentando di aprire una nuova scheda da una funzione personalizzata.

In questa pagina, apri una console JavaScript e digita:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

E proverà ad aprire un popup indipendentemente dalle impostazioni, poiché il "clic" proviene da un'azione personalizzata.

Per comportarsi come un vero 'clic del mouse' su un collegamento, è necessario seguire i consigli di @ spirinvladimir e crearlo realmente :

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Ecco un esempio completo (non provarlo jsFiddle o editor online simili, in quanto non ti consentirà di reindirizzare a pagine esterne da lì):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
— chipairon
fonte
1
Ho finito per andare a una soluzione diversa dove faccio w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)come da theandystratton.com/2012/…
— Paul Tomblin
11
@FahadAbidJanjua E 'assolutamente non corretta. Dipende ancora dalle impostazioni del browser. Non c'è nulla nelle specifiche HTML o Javascript che dichiari che deve essere aperta una "azione personalizzata" in un popup anziché in una scheda. In effetti, nessuno dei browser sulla mia macchina attuale mostra questo comportamento.
— nmclean,
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
— Andrew Luca
fonte
1
Questo potrebbe aprirsi in una nuova scheda o finestra a seconda delle impostazioni del browser. La domanda riguarda in particolare l'apertura in una nuova scheda anche se le preferenze sono per una nuova finestra.
— Quentin,
3

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— Bryan
fonte
Questo potrebbe aprirsi in una nuova scheda o finestra a seconda delle impostazioni del browser. La domanda riguarda in particolare l'apertura in una nuova scheda anche se le preferenze sono per una nuova finestra.
— Quentin,
2

Oppure potresti semplicemente creare un elemento link e fare clic su di esso ...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

Questo non dovrebbe essere bloccato da nessun blocco dei popup ... Speriamo.

— Luke Alderton
fonte
2

C'è una risposta a questa domanda e non è no.

Ho trovato un modo semplice per aggirare:

Passaggio 1: creare un collegamento invisibile:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Passaggio 2: fare clic su quel collegamento a livello di codice:

document.getElementById("yourId").click();

Ecco qui! Funziona un incanto per me.

— ALZlper
fonte
Questo potrebbe aprirsi in una nuova scheda o finestra a seconda delle impostazioni del browser. La domanda riguarda in particolare l'apertura in una nuova scheda anche se le preferenze sono per una nuova finestra.
— Quentin,
1

inserisci qui la descrizione dell'immagine

Ho cercato molte informazioni su come aprire una nuova scheda e rimanere nella stessa scheda. Ho trovato un piccolo trucco per farlo. Supponiamo che tu abbia l'URL che devi aprire - newUrl e old url - currentUrl , su cui devi rimanere dopo l'apertura della nuova scheda. Il codice JS sarà simile al prossimo:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
— Vaha
fonte
La domanda riguarda l'apertura di una nuova scheda quando la preferenza dell'utente è di aprirli in nuove finestre. Non sta chiedendo come aprire un URL in una nuova scheda mentre si apre contemporaneamente un altro URL nella scheda esistente.
— Quentin,
0

Che ne dite di creare un valore <a>con attributo _blankas come targete il urlashref display , with style: nascosto con un elemento children? Quindi aggiungi al DOM e quindi attiva l'evento click su un elemento figlio.

AGGIORNARE

Non funziona Il browser impedisce il comportamento predefinito. Potrebbe essere attivato a livello di codice, ma non segue il comportamento predefinito.

Controlla e vedi di persona: http://jsfiddle.net/4S4ET/

— Vincitore
fonte
-1

L'apertura di una nuova scheda da un'estensione di Firefox (Mozilla) è la seguente:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
— Smile4ever
fonte
-1

In questo modo è simile alla soluzione precedente ma implementato in modo diverso

.social_icon -> alcune classi con CSS 

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });
— CG_DEV
fonte
-1

Questo potrebbe essere un trucco, ma in Firefox se si specifica un terzo parametro, "fullscreen = yes", si apre una nuova finestra nuova.

Per esempio,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

Sembra effettivamente sovrascrivere le impostazioni del browser.

— Kunal
fonte
-1

questo lavoro per me, basta prevenire l'evento, aggiungere l'URL e <a> tagquindi attivare l'evento click su quello tag.

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
— Carlos Salazar
fonte
Questo potrebbe aprirsi in una nuova scheda o finestra a seconda delle impostazioni del browser. La domanda riguarda in particolare l'apertura in una nuova scheda anche se le preferenze sono per una nuova finestra.
— Quentin,
-1

Il window.open(url)aprirà url in Tab nuovo browser. Di seguito un'alternativa a JS

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

qui è un esempio funzionante (i frammenti di stackoverflow non consentono di aprire una nuova scheda)

— Kamil Kiełczewski
fonte
"Window.open (url) aprirà l'URL nella nuova scheda del browser" - Seguirà le preferenze dell'utente per una nuova finestra o una nuova scheda. Non forzerà una nuova scheda quando la preferenza è per una finestra. (Di che si tratta la domanda). Lo stesso vale per target = _blank.
— Quentin,
Entrambi gli approcci che suggerisci sono stati menzionati (e criticati) molte volte nelle precedenti 56 risposte non cancellate su questa domanda.
— Quentin,
-1

Se aprire l'URL in una nuova scheda o in una nuova finestra, è effettivamente controllato dalle preferenze del browser dell'utente. Non è possibile ignorarlo in JavaScript.

window.open()si comporta in modo diverso a seconda di come viene utilizzato. Se viene chiamato come risultato diretto di un'azione dell'utente , diciamo un clic sul pulsante, dovrebbe funzionare correttamente e aprire una nuova scheda (o finestra):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

Tuttavia, se si tenta di aprire una nuova scheda da una richiesta di richiamata AJAX , il browser la bloccherà poiché si trattava di un'azione diretta dell'utente.

Per aggirare il blocco popup e aprire una nuova scheda da una richiamata, ecco un piccolo trucco :

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
— attacomsian
fonte
-1

Ho provato in questo modo e sembra funzionare bene

window.open('example.com', 'newWin');

Ho trovato molti esempi funzionanti qui:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

— Artem Shevtsov
fonte
Questo si aprirà in una nuova scheda o finestra secondo le preferenze dell'utente. Non forzerà una nuova scheda di cui si tratta la domanda.
— Quentin,
— Quentin,
@Quentin Ho perso quella parte, ma quando ho provato a chiamare window.open con il secondo parametro «windowName» uguale a «_blank» o senza di esso, il popup o la nuova scheda non sono apparsi nell'ultimo Google Chrome. Quando ho cambiato il nome della finestra in «newWin», si è aperta una nuova scheda. È strano perché il parametro del nome della finestra è facoltativo.
— Artem Shevtsov,
-4

Concordo in qualche modo con la persona che ha scritto (parafrasato qui): "Per un collegamento in una pagina Web esistente, il browser aprirà sempre il collegamento in una nuova scheda se la nuova pagina fa parte dello stesso sito Web di la pagina web esistente ". Per me, almeno, questa "regola generale" funziona in Chrome, Firefox, Opera, IE, Safari, SeaMonkey e Konqueror.

Ad ogni modo, c'è un modo meno complicato di trarre vantaggio da ciò che l'altra persona ha presentato. Supponendo che stiamo parlando del tuo sito web ("thissite.com" di seguito), dove vuoi controllare ciò che fa il browser, quindi, di seguito, vuoi che "specialpage.htm" sia VUOTO, nessun HTML ( consente di risparmiare tempo nell'invio dei dati dal server!).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
— vernonner3voltazim
fonte
-7

Se vuoi solo aprire i collegamenti esterni (collegamenti che vanno ad altri siti), allora questo bit di JavaScript / jQuery funziona bene:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});
— Michael
fonte
Questa risposta non è adatta a questa domanda, ma è molto utile pensare! Grazie per la tua idea!
— Nuri Akman,
-9

Il browser aprirà sempre il collegamento in una nuova scheda se il collegamento si trova sullo stesso dominio (sullo stesso sito Web). Se il collegamento si trova su un altro dominio, lo aprirà in una nuova scheda / finestra, a seconda delle impostazioni del browser.

Quindi, secondo questo, possiamo usare:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

E aggiungi del codice jQuery:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

Quindi, prima apri una nuova finestra sullo stesso sito Web con _blank target (lo aprirà in una nuova scheda), quindi apri il sito Web desiderato all'interno di quella nuova finestra.

— loshMiS
fonte
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.