Come simulare target = "_ blank" in JavaScript


156

Quando un utente fa clic su un collegamento, devo aggiornare un campo in un database e quindi aprire il collegamento richiesto in una nuova finestra. L'aggiornamento non è un problema, ma non so come aprire una nuova finestra senza richiedere loro di fare clic su un altro collegamento ipertestuale.

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

1
Hm? target="_top"non si apre in una nuova finestra - lo target="_blank"fa.
Tomalak,

Se il collegamento si sta già aprendo in una nuova finestra (a causa di target = "_ blank") e il gestore di clic javascript sta già aggiornando il database, perché dovresti aprire la nuova finestra con Javascript?
Joel Mueller,

Risposte:


298
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

Il secondo parametro è facoltativo ed è il nome della finestra di destinazione.


2
window.openfa quello che target="_blank"fa - apre l'URL in una nuova finestra.
Ceejayoz,

3
sì. il secondo argomento di window.open () è il "nome" che si desidera dare alla finestra, in modo simile all'impostazione di una destinazione su un collegamento. developer.mozilla.org/En/DOM:window.open
Omer Bokhari,

2
Oh, capisco. window.open è bloccato dal blocco pop-up di Firefox, ma target = "_ blank" non lo è. Devo solo chiedere al cliente di abilitare i popup dal proprio sito Web?
Phillip Senn,

7
Esiste una soluzione JavaScript che non viene bloccata dai blocchi popup come quello di Firefox?
ma11hew28,

4
@MattDiPasquale blocking window.open è un po 'il punto di blocco dei pop-up! Se si effettua la chiamata in risposta a un clic, è più probabile che non venga bloccato.
William Denniss,

19

Questo potrebbe aiutare

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);

IE11: "Errore Javascript di runtime: non è un'azione valida per l'oggetto"
T-moty

8
Questa risposta potrebbe essere migliorata aggiungendo una descrizione di ciò che sta accadendo
Elly Post,

13

So che è un affare fatto e risolto, ma ecco cosa sto usando per risolvere il problema nella mia app.

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

Fondamentalmente quello che sta succedendo qui è che eseguo un controllo per verificare se il collegamento ha un target=_blankattributo. In caso contrario, interrompe l'attivazione del collegamento, lo imposta per aprirsi in una nuova finestra, quindi fa clic programmaticamente su di esso.

Puoi fare un ulteriore passo avanti e saltare l'arresto del clic originale (e rendere il tuo codice molto più compatto) provando questo:

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

Se si utilizza jQuery per sottrarre l'implementazione dell'aggiunta di un attributo a più browser, è necessario utilizzare questo invece di e.target.setAttribute("target", "_blank"):

    jQuery(event.target).attr("target", "_blank")

Potrebbe essere necessario rielaborarlo per adattarlo esattamente al tuo caso d'uso, ma ecco come ho graffiato il mio prurito.

Ecco una demo in azione per farti confondere.

(Il link in jsfiddle torna a questa discussione .. non c'è bisogno di una nuova scheda :))


1
Preferisco questa risposta su tutto perché, beh, utilizza jquery ed evita i problemi di blocco dei popup di window.open. Ciò è perfettamente legittimo quando si tratta di alcuni dati di terze parti che contengono collegamenti che non hanno l'obiettivo.
IncredibileHat

7

Personalmente preferisco usare il seguente codice se è per un singolo link. Altrimenti è probabilmente meglio se crei una funzione con un codice simile.

onclick="this.target='_blank';"

Ho iniziato a usarlo per bypassare il severo test XHTML del W3C.


1
Penso che JavaScript inline sia più disordinato rispetto all'aggiunta di un attributo "non standard" che funziona ovunque.
Matti Virkkunen,

@MattiVirkkunen in alcune situazioni è l'unica soluzione
Claudiu Creanga

1
@Claudiu: Se ti trovi in ​​una situazione così assurda, dovresti piuttosto risolvere la causa piuttosto che lamentarti.
Matti Virkkunen,

5

Ecco come lo faccio con jQuery. Ho una classe per ogni link che voglio aprire in una nuova finestra.

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});

2

Puoi estrarre l'href dal tag a:

window.open(document.getElementById('redirect').href);

1

Questo potrebbe aiutarti ad aprire tutti i collegamenti alle pagine :

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

Aprirà tutti gli <a href="" class="myClass"></a>elementi di collegamento in un'altra scheda come se avessi fatto clic su ciascuno di essi.

Devi solo incollarlo sulla console del browser. framework jQuery richiesto

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.