web-dev-qa-db-fra.com

Ouvrir une URL dans un nouvel onglet (et non dans une nouvelle fenêtre) à l'aide de JavaScript

J'essaie d'ouvrir un URL dans un nouvel onglet, par opposition à une fenêtre contextuelle.

J'ai vu des questions connexes dont les réponses ressembleraient à ceci:

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

Mais aucun d'entre eux n'a fonctionné pour moi, le navigateur a quand même tenté d'ouvrir une fenêtre contextuelle.

javascript
1875
Mark F

Rien qu'un auteur ne puisse faire ne peut choisir d'ouvrir un nouvel onglet au lieu d'une nouvelle fenêtre. c'est une préférence utilisateur .

CSS3 proposé target-new , mais la spécification a été abandonnée .

L'inverse n'est pas vrai; en spécifiant les dimensions de la fenêtre dans le troisième argument de window.open(), vous pouvez déclencher une nouvelle fenêtre lorsque la préférence concerne les onglets.

819
Quentin

C'est un truc,

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

Dans la plupart des cas, cela devrait se produire directement dans le gestionnaire onclick pour que le lien empêche les bloqueurs de fenêtres publicitaires et le comportement par défaut de la "nouvelle fenêtre". Vous pouvez le faire de cette manière ou en ajoutant un écouteur d'événement à votre objet DOM.

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

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

1530
Rinto George

window.open() ne s'ouvrira pas dans un nouvel onglet s'il ne se produit pas lors de l'événement de clic réel. Dans l'exemple donné, l'URL est ouverte lors de l'événement de clic réel. Cela fonctionnera à condition que l'utilisateur dispose des paramètres appropriés dans le navigateur.

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

De même, si vous essayez d'effectuer un appel Ajax dans la fonction de clic et souhaitez ouvrir une fenêtre en cas de succès, assurez-vous que vous effectuez l'appel Ajax avec le jeu d'options async : false.

350
Venkat Kotra

window.open Impossible d'ouvrir de manière fiable les fenêtres contextuelles dans un nouvel onglet de tous les navigateurs

Différents navigateurs implémentent le comportement dewindow.opende différentes façons, en particulier en ce qui concerne les préférences du navigateur de l'utilisateur. Vous ne pouvez pas vous attendre au même comportement pour window.open pour être vrai sur tous les navigateurs Internet Explorer, Firefox et Chrome, en raison des différentes manières dont ils gèrent les préférences du navigateur d'un utilisateur.

Par exemple, les utilisateurs d’Internet Explorer (11) peuvent choisir d’ouvrir les popups dans une nouvelle fenêtre ou un nouvel onglet, vous ne pouvez pas forcer les utilisateurs d’Internet Explorer 11 à ouvrir les popups d’une certaine manièrewindow.open , comme mentionné dans réponse de Quentin .

Comme pour les utilisateurs de Firefox (29), l’utilisation de window.open(url, '_blank')dépend des préférences d’onglet de leur navigateur, bien que vous puissiez toujours les forcer à ouvrir des popups dans une nouvelle fenêtre en spécifiant une largeur et une hauteur (voir " Qu'en est-il de Chrome? "Ci-dessous).

Manifestation

Accédez aux paramètres de votre navigateur et configurez-le pour ouvrir les popups dans une nouvelle fenêtre.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Page de test

Après avoir configuré Internet Explorer (11) pour ouvrir les fenêtres contextuelles dans une nouvelle fenêtre, comme indiqué ci-dessus, utilisez la page de test suivante pour tester 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>

Observez que les popups sont ouverts dans une nouvelle fenêtre, pas un nouvel onglet.

Vous pouvez également tester les extraits ci-dessus dans Firefox (29) avec sa préférence de tabulation définie pour les nouvelles fenêtres et obtenir les mêmes résultats.

Qu'en est-il de Chrome? Il implémente window.open différemment d'Internet Explorer (11) et de Firefox (29).

Je ne suis pas sûr à 100%, mais il semble que Chrome (version 34.0.1847.131 m) ne semble pas avoir de paramètres que l'utilisateur peut utiliser pour choisir d'ouvrir ou non des fenêtres contextuelles dans une nouvelle fenêtre ou un nouvel onglet (comme Firefox et Internet Explorer ont). J'ai vérifié la Chrome documentation relative à la gestion des pop-ups , mais elle ne mentionnait rien de ce genre de chose.

En outre, ne fois encore, différents navigateurs semblent implémenter le comportement dewindow.opendifféremment. Dans Chrome et Firefox, spécifier une largeur et une hauteur va forcer un popup, même lorsqu'un utilisateur a configuré Firefox (29) pour ouvrir de nouvelles fenêtres dans un nouvel onglet (comme indiqué dans les réponses à - JavaScript est ouvert dans une nouvelle fenêtre, pas d'onglet ):

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

Toutefois, le même fragment de code ci-dessus ouvrira toujours un nouvel onglet dans Internet Explorer 11 si les utilisateurs définissent les onglets comme préférences de leur navigateur, même si vous ne spécifiez pas la largeur et la hauteur, une nouvelle fenêtre contextuelle leur sera forcée.

Le comportement de window.open dans Chrome semble donc être d'ouvrir des fenêtres contextuelles dans un nouvel onglet lorsqu'il est utilisé dans un événement onclick, afin de les ouvrir dans de nouvelles fenêtres lorsqu'elles sont utilisées à partir de la console du navigateur. ( comme noté par d'autres personnes ), et de les ouvrir dans de nouvelles fenêtres lorsque spécifié avec une largeur et une hauteur.

Sommaire

Différents navigateurs implémentent le comportement dewindow.opendifféremment en ce qui concerne les préférences du navigateur des utilisateurs. Vous ne pouvez pas vous attendre au même comportement de window.open pour qu'il soit vrai Internet Explorer, Firefox et Chrome, en raison des différentes manières dont ils gèrent les préférences du navigateur de l'utilisateur.

Lecture supplémentaire

241
user456814

Bon mot:

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

Il crée un élément virtuel a, lui donne target="_blank" pour qu'il s'ouvre dans un nouvel onglet, lui donne la valeur urlhref puis le clique dessus.

Et si vous le souhaitez, vous pouvez créer une fonction à partir de cela:

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

et alors vous pouvez l'utiliser comme:

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

Si vous utilisez window.open(url, '_blank'), il sera bloqué (bloqueur de fenêtres publicitaires) sur Chrome.

Essaye ça:

//With JQuery

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

Avec du JavaScript pur,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
71
Mohammed Safeer

Pour élaborer la réponse de Steven Spielberg, je l’ai fait dans un tel cas:

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

De cette façon, juste avant que le navigateur ne suive le lien, je mets l'attribut target afin que le lien s'ouvre dans un nouvel onglet ou une nouvelle fenêtre (dépend des paramètres de l'utilisateur).

59
arikfr

J'utilise ce qui suit et ça marche très bien !!!

window.open(url, '_blank').focus();
34
Ezequiel García

Un fait intéressant est que le nouvel onglet ne peut pas être ouvert si l'action n'est pas invoquée par l'utilisateur (en cliquant sur un bouton ou quelque chose) ou si elle est asynchrone, par exemple, cela ne s'ouvrira PAS dans un nouvel onglet:

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

Mais cela peut s’ouvrir dans un nouvel onglet, en fonction des paramètres du navigateur:

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

Je pense que tu ne peux pas contrôler ça. Si l'utilisateur a configuré son navigateur pour ouvrir les liens dans une nouvelle fenêtre, vous ne pouvez pas forcer cette option à ouvrir les liens dans un nouvel onglet.

JavaScript est ouvert dans une nouvelle fenêtre, pas d'onglet

15
Fran Verona

Le simple fait d'omettre les paramètres [strWindowFeatures] ouvrira un nouvel onglet, SAUF SI les paramètres du navigateur sont remplacés (les paramètres du navigateur supplantent JavaScript).

Nouvelle fenetre

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

Nouvel onglet

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

-- ou --

var myWin = window.open(strUrl);
13
MannyC
(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')))
11
spirinvladimir

Vous pouvez utiliser une astuce avec 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();
}

démo jsFiddle

11
CodeNinja

Cela n'a rien à voir avec les paramètres du navigateur si vous essayez d'ouvrir un nouvel onglet à partir d'une fonction personnalisée.

Sur cette page, ouvrez une console JavaScript et tapez:

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

Et il tentera d'ouvrir une fenêtre contextuelle quels que soient vos paramètres, car le "clic" provient d'une action personnalisée.

Afin de se comporter comme un véritable "clic de souris" sur un lien, vous devez suivre le conseil de @ spirinvladimir et vraiment le créer:

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

Voici un exemple complet (ne l'essayez pas sur jsFiddle ou des éditeurs en ligne similaires, car cela ne vous laissera pas rediriger vos pages vers des pages externes):

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

Ou vous pouvez simplement créer un élément de lien et cliquer dessus ...

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

Cela ne devrait pas être bloqué par des bloqueurs de popup ... Heureusement.

4
Luke Alderton

Il y a une réponse à cette question et ce n'est pas non.

J'ai trouvé un travail facile autour de:

Étape 1: Créez un lien invisible:

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

Étape 2: Cliquez sur ce lien par programme:

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

Voici! Travaille un charme pour moi.

3
ALZlper

S'il s'agit de quelque chose que vous essayez simplement de charger sur l'élément, essayez ceci. Lors du chargement de la page, votre propriété cible sera ajoutée avec l'attribut correct.

$ (your_element_here) .prop ('target', '_blank');

1
HeroZero
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
1
Andrew Luca

Que diriez-vous de créer un <a> avec _blank en tant que valeur d'attribut target et la url en tant que href, avec affichage du style: masqué avec un élément enfant? Ajoutez ensuite au DOM puis déclenchez l'événement click sur un élément children.

MISE À JOUR

Ça ne marche pas. Le navigateur empêche le comportement par défaut. Il peut être déclenché par programme, mais il ne suit pas le comportement par défaut.

Vérifiez et voyez par vous-même: http://jsfiddle.net/4S4ET/

0
Victor