Comment simuler target = "_ blank" en JavaScript

156

Lorsqu'un utilisateur clique sur un lien, je dois mettre à jour un champ dans une base de données puis ouvrir le lien demandé dans une nouvelle fenêtre. La mise à jour ne pose aucun problème, mais je ne sais pas comment ouvrir une nouvelle fenêtre sans les obliger à cliquer sur un autre lien hypertexte.

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

javascript

— Phillip Senn
source

1

Hm? target="_top"ne s'ouvre pas dans une nouvelle fenêtre - target="_blank"fait.

— Tomalak

Si le lien s'ouvre déjà dans une nouvelle fenêtre (en raison de target = "_ blank") et que le gestionnaire de clics javascript met déjà à jour votre base de données, pourquoi auriez-vous besoin d'ouvrir la nouvelle fenêtre avec Javascript?

— Joel Mueller

298

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

Le deuxième paramètre est facultatif et correspond au nom de la fenêtre cible.

— ChristopheD
source

2

window.openfait ce que target="_blank"fait - il ouvre l'URL dans une nouvelle fenêtre.

— ceejayoz

3

Oui. le deuxième argument de window.open () est le "nom" que vous voulez donner à la fenêtre, semblable à la définition d'une cible sur un lien. developer.mozilla.org/En/DOM:window.open

— Omer Bokhari

2

Oh je vois. window.open est bloqué par le bloqueur de fenêtres pop-up de Firefox, mais target = "_ blank" ne l'est pas. Dois-je simplement demander au client d'activer les fenêtres contextuelles à partir de son propre site Web?

— Phillip Senn

7

Existe-t-il une solution JavaScript qui ne soit pas bloquée par des bloqueurs de pop-up comme celui de Firefox?

— ma11hew28

4

@MattDiPasquale bloquant window.open est un peu le but des bloqueurs de pop-up! Si vous effectuez l'appel en réponse à une action de clic, il a de meilleures chances de ne pas être bloqué.

— William Denniss

19

Cela pourrait aider

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);

— Jair Reina
source

IE11: "Erreur d'exécution Javascript: action non valide pour l'objet"

— T-moty

8

Cette réponse pourrait être améliorée en ajoutant une description de ce qui se passe

— Elly Post

13

Je sais que c'est un accord fait et réglé, mais voici ce que j'utilise pour résoudre le problème dans mon application.

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

En gros, ce qui se passe ici, c'est que je vérifie si le lien a target=_blank attribut. Si ce n'est pas le cas, il arrête le lien de se déclencher, le configure pour s'ouvrir dans une nouvelle fenêtre, puis clique dessus par programme.

Vous pouvez aller plus loin et ignorer l'arrêt du clic d'origine (et rendre votre code beaucoup plus compact) en essayant ceci:

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

Si vous utilisiez jQuery pour résumer l'implémentation de l'ajout d'un attribut cross-browser, vous devriez utiliser ceci au lieu de e.target.setAttribute("target", "_blank"):

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

Vous devrez peut-être le retravailler pour l'adapter à votre cas d'utilisation exact, mais voici comment j'ai gratté ma propre démangeaison.

Voici une démo en action pour que vous puissiez jouer avec.

(Le lien dans jsfiddle revient à cette discussion .. pas besoin d'un nouvel onglet :))

— Akamaozu
source

1

Je préfère cette réponse à tout parce que, eh bien, elle utilise jquery et évite les problèmes de bloqueur de popup window.open. Ceci est parfaitement légitime lorsqu'il s'agit de données tierces contenant des liens dont la cible manque.

— IncredibleHat

7

Personnellement, je préfère utiliser le code suivant s'il s'agit d'un seul lien. Sinon, il est probablement préférable de créer une fonction avec un code similaire.

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

J'ai commencé à l'utiliser pour contourner le test strict XHTML du W3C.

— Zennethe Fuchs
source

1

Je pense que le JavaScript en ligne est plus compliqué que l'ajout d'un attribut "non standard" qui fonctionne partout.

— Matti Virkkunen

@MattiVirkkunen dans certaines situations, c'est la seule solution

— Claudiu Creanga

1

@Claudiu: Si vous vous trouvez dans une situation aussi absurde, vous devriez plutôt corriger la cause plutôt que de la contourner.

— Matti Virkkunen

5

Voilà comment je le fais avec jQuery. J'ai une classe pour chaque lien que je souhaite ouvrir dans une nouvelle fenêtre.

$(function(){

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

— Jindra Helcl
source

2

Vous pouvez extraire le href de la balise a:

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

— Treznik
source

1

Cela peut vous aider à ouvrir tous les liens de page :

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

Il ouvrira tous les <a href="" class="myClass"></a>éléments de lien vers un autre onglet comme vous auriez cliqué sur chacun d'eux.

Il vous suffit de le coller dans la console du navigateur. Framework jQuery requis

— radacina
source