Question Ouvrir une URL dans un nouvel onglet (et non une nouvelle fenêtre) en utilisant JavaScript


J'essaie d'ouvrir un URL dans un nouvel onglet, par opposition à une fenêtre contextuelle. J'ai vu des questions connexes où les réponses ressembleraient à quelque chose comme:

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

Mais aucun d'eux ne travaillait pour moi, le navigateur essayait toujours d'ouvrir une fenêtre contextuelle.


1588
2018-02-05 15:52


origine


Réponses:


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

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

le sens inverse ce 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 est pour les onglets.


699
2018-02-05 15:53



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 onclick gestionnaire pour le lien pour empêcher les bloqueurs de pop-up, et le comportement "nouvelle fenêtre" par défaut. Vous pouvez le faire de cette façon, ou en ajoutant un écouteur d'événement à votre DOM objet.

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

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


1256
2017-07-08 14:49



window.open() ne s'ouvrira pas dans un nouvel onglet si cela ne se produit pas sur l'événement click réel. Dans l'exemple donné, l'URL est en cours d'ouverture sur 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 de faire un appel Ajax dans la fonction de clic et que vous voulez ouvrir une fenêtre sur le succès, assurez-vous que vous faites l'appel Ajax avec le async : false jeu d'options.


315
2017-10-31 13:15



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

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

Par exemple, les utilisateurs d'Internet Explorer (11) peuvent choisir d'ouvrir des fenêtres contextuelles dans une nouvelle fenêtre ou un nouvel onglet, vous ne pouvez pas forcer les utilisateurs Internet Explorer 11 à ouvrir des fenêtres contextuelles d'une certaine manière à travers  window.open, comme mentionné dans La réponse de Quentin.

Quant aux utilisateurs de Firefox (29), en utilisant window.open(url, '_blank')  dépend des préférences de l'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 la section «Que dire de Chrome?» ci-dessous).

Manifestation

Accédez aux paramètres de votre navigateur et configurez-le pour ouvrir les fenêtres contextuelles 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 ces extraits ci-dessus dans Firefox (29) avec sa préférence de tabulation définie sur de nouvelles fenêtres, et voir les mêmes résultats.

Qu'en est-il de Chrome? Il met en œuvre window.open Différent d'Internet Explorer (11) et de Firefox (29).

Je ne suis pas sûr à 100%, mais il ressemble à 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 les popups dans une nouvelle fenêtre ou un nouvel onglet (comme Firefox et Internet Explorer). j'ai vérifié la documentation Chrome pour la gestion des pop-ups, mais ça n'a rien dit à propos de ce genre de chose.

Aussi, encore une fois, différents navigateurs semblent mettre en œuvre le comportement de  window.open  différemment. Dans Chrome et Firefox, spécifier une largeur et une hauteur forcera un popup, même lorsqu'un utilisateur a configuré Firefox (29) pour ouvrir de nouvelles fenêtres dans un nouvel onglet (comme mentionné dans les réponses à JavaScript ouvert dans une nouvelle fenêtre, pas dans l'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>

Cependant, le même extrait de code ci-dessus ouvrira toujours un nouvel onglet dans Internet Explorer 11 si les utilisateurs définissent les onglets comme leurs préférences de navigateur, ne pas même spécifier une largeur et la hauteur va forcer une nouvelle fenêtre popup pour eux.

Donc, le comportement de window.open dans Chrome semble être d'ouvrir des popups dans un nouvel onglet lorsqu'il est utilisé dans un onclick événement, pour les ouvrir dans de nouvelles fenêtres lorsqu'il est utilisé depuis 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.

Résumé

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

Lecture supplémentaire


224
2018-05-01 19:42



Bon mot:

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

ou

Avec jQuery J'utilise celui-ci:

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

Il crée un virtuel a élément, le donne target="_blank" donc il ouvre dans un nouvel onglet, lui donne propre url  href puis clique dessus.

Et si vous voulez, basé sur cela, vous pouvez créer une fonction:

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

et alors vous pouvez l'utiliser comme:

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

Pour un non-jQuery scénario, la fonction ressemblerait à ceci:

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



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 que je mets l'attribut target, il ouvrira le lien dans un nouvel onglet ou une nouvelle fenêtre (dépend des paramètres de l'utilisateur).


55
2018-04-05 15:02



Si tu utilises window.open(url, '_blank'), il sera bloqué (bloqueur de popup) sur Chrome.

Essaye ça:

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

51
2018-05-28 16:43



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

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

29
2018-03-11 11:51