Ouvrez une URL dans un nouvel onglet (et non une nouvelle fenêtre)

2102

J'essaie d'ouvrir une 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'entre eux n'a fonctionné pour moi, le navigateur a quand même essayé d'ouvrir une fenêtre contextuelle.

javascript marque
la source
85
C'est généralement une question de préférence. Certaines personnes aiment les fenêtres (et protègent farouchement ce comportement), certains onglets (et protègent farouchement ce comportement). Vous seriez donc en train de vaincre un comportement qui est généralement considéré comme une question de goût, pas de design.
Jared Farrish
42
Javascript ne sait rien de votre navigateur et de vos onglets par rapport à Windows, c'est donc au navigateur de décider comment ouvrir une nouvelle fenêtre.
Andrey
4
Comment puis-je configurer Chrome pour l'afficher dans un nouvel onglet, par opposition à une fenêtre contextuelle?
Mark
8
Gmail le fait en quelque sorte, au moins dans Chrome. Maj + clic sur une ligne de courrier électronique et vous ouvrez ce courrier électronique dans une nouvelle fenêtre. Ctrl + clic et vous l'ouvrez dans un nouvel onglet. Seul problème: creuser dans le code obscurci de gmail est un PITA
Sergio
48
@Sergio, c'est le comportement par défaut du navigateur pour tout lien. (Pour Chrome et Firefox au moins.) N'a rien à voir avec Gmail.
Qtax

Réponses:

929

Rien de ce qu'un auteur peut faire ne peut choisir d'ouvrir dans un nouvel onglet au lieu d'une nouvelle fenêtre; c'est une préférence de l'utilisateur . (Notez que la préférence utilisateur par défaut dans la plupart des navigateurs est pour les nouveaux onglets, donc un test trivial sur un navigateur où cette préférence n'a pas été modifiée ne le démontrera pas.)

CSS3 a proposé une nouvelle cible , 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 est pour les onglets.

Quentin
la source
42
@AliHaideri Le Javascript n'a rien à voir avec la façon dont le nouvel onglet / fenêtre est ouvert. Tout est déterminé par les paramètres de votre navigateur. L'utilisation window.openindique au navigateur d'ouvrir quelque chose de nouveau, puis le navigateur ouvre ce qui est choisi dans ses paramètres - onglet ou fenêtre. Dans les navigateurs que vous avez testés, modifiez les paramètres pour les ouvrir dans une nouvelle fenêtre au lieu d'un onglet et vous verrez que les solutions des autres sont fausses.
Ian
240
Deux choses qui font perdre du temps aux autres que de leur dire quelque chose ne peut pas être fait. (1) Leur dire quelque chose qui ne peut pas être fait peut être fait. (2) Garder le silence et les laisser continuer à chercher un moyen de faire quelque chose qui ne peut pas être fait.
Quentin
8
@Cupcake - La documentation ne prend généralement pas la peine de décrire des fonctionnalités qui n'existent pas. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/…
Quentin
9
@Neel - Parce que cela va succinctement au sujet d'un sujet que beaucoup de gens veulent connaître.
Quentin
4
Les auteurs peuvent faire des choses (principalement écrire du code différent). Aucune de ces choses ne déclenchera un onglet au lieu d'une fenêtre.
Quentin
1734

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 onclickgestionnaire du lien pour empêcher les bloqueurs de fenêtres publicitaires et le comportement par défaut de la "nouvelle fenêtre". Vous pouvez le faire de cette façon ou en ajoutant un écouteur d'événements à votre DOMobjet. 

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

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

Rinto George
la source
117
Ne marche pas. Vous avez un message à droite de la barre d'adresse: Popup bloquée . Ensuite, j'ai autorisé les popups. Et voilà, il s'ouvre dans une popup, pas dans un onglet ! Chrome 22.0.1229.94 sur OS X Lion.
nalply
39
@ b1naryatr0phy C'est parce que vous ne l'avez pas testé correctement. Modifiez les paramètres de vos navigateurs. Qu'il soit ouvert dans un onglet ou une fenêtre est déterminé par les paramètres de votre navigateur. Il n'y a rien que vous puissiez faire en appelant window.open (ou tout autre Javascript) pour choisir comment ouvrir la nouvelle fenêtre / le nouvel onglet.
Ian
Question: J'ai défini l'URL sans protocole (par exemple my.site.com/Controller/Index). En conséquence, j'obtiens une nouvelle fenêtre (onglet) par URL telle que l'URL de la page en cours (d'où j'utilise la fonction OpenInNewTab) plus passée dans la fonction URL. Avec la fenêtre de protocole s'ouvre par un lien correct. Pourquoi?
user2167382
2
var win = window.open (url, '_blank'); le '_blank' n'est pas nécessaire, pour window.open () , le deuxième paramètre est strWindowName, pour: Un nom de chaîne pour la nouvelle fenêtre. Le nom peut être utilisé comme cible de liens et de formulaires à l'aide de l'attribut cible d'un élément <a> ou <form>. Le nom ne doit contenir aucun caractère d'espacement. Notez que strWindowName ne spécifie pas le titre de la nouvelle fenêtre.
hydRAnger
Existe-t-il un moyen de créer un nouvel onglet sans qu'il s'agisse d'un iframe en bac à sable? Lorsque j'utilise ceci, j'obtiens des erreurs CORS car la valeur document.domain n'est pas modifiée car elle est ouverte en tant que iframe.
Ids van der Zee
380

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 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 souhaitez ouvrir une fenêtre en cas de succès, assurez-vous de faire l'appel Ajax avec le async : falsejeu d'options.

Venkat Kotra
la source
28
Ce serait bien de marquer celle-ci comme la réponse correcte. Mes tests avec Chrome v26 (Windows) confirment que si le code se trouve dans le gestionnaire de clics d'un bouton, il ouvre un nouvel onglet et si le code est appelé par programme, par exemple à partir de la console, il ouvre une nouvelle fenêtre.
CyberFonic
2
@Ian D'après mes tests sur les navigateurs avec des paramètres par défaut, cette réponse fonctionne dans les cas où les réponses ci-dessus ne le font pas. La réponse acceptée qui dit "vous ne pouvez rien faire" n'est vraie que lorsque l'utilisateur a modifié les paramètres par défaut.
Garfield
@Ian Par souci de clarté, je l'ai mentionné dans l'avertissement de réponse sur les paramètres utilisateur. "Cela fonctionnera à condition que l'utilisateur dispose des paramètres appropriés dans le navigateur." Je pense que la majorité des utilisateurs ne modifient pas les paramètres du navigateur et cette réponse fonctionne pour la majorité d'entre eux.
Venkat Kotra
async: falsene fonctionne pas dans Chrome. Pour ouvrir une nouvelle fenêtre à partir du rappel, vous devez d'abord ouvrir une fenêtre vide avant d'envoyer la demande HTTP, puis la mettre à jour. Voici un bon hack .
attacomsian
250

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

Différents navigateurs mettent en œuvre le comportement de window.open de différentes manières, en particulier en ce qui concerne les préférences du navigateur d'un utilisateur. Vous ne pouvez pas vous attendre à ce que le même comportement window.opensoit vrai dans 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 des fenêtres contextuelles dans une nouvelle fenêtre ou un nouvel onglet, vous ne pouvez pas forcer les utilisateurs d'Internet Explorer 11 à ouvrir des fenêtres contextuelles d'une certaine manière window.open , comme mentionné dans la réponse de Quentin .

En ce qui concerne les utilisateurs de Firefox (29), l'utilisation window.open(url, '_blank') dépend des préférences de l'onglet de leur navigateur, mais vous pouvez toujours les forcer à ouvrir des fenêtres contextuelles dans une nouvelle fenêtre en spécifiant une largeur et une hauteur (voir la section "Qu'en est-il de Chrome?" Ci-dessous).

Manifestation

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

Internet Explorer (11)

Boîte de dialogue des paramètres d'Internet Explorer 1

Boîte de dialogue des paramètres de l'onglet Internet Explorer

Page de test

Après avoir configuré Internet Explorer (11) pour ouvrir des fenêtres contextuelles dans une nouvelle fenêtre comme illustré 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>

Notez 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.

Et Chrome? Il implémente window.opendiffé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 avoir). J'ai vérifié la documentation de Chrome pour gérer les fenêtres pop-up , mais cela ne mentionnait rien de ce genre de chose.

De plus, une fois de plus, différents navigateurs semblent implémenter le comportement de window.open différemment. Dans Chrome et Firefox, la spécification d'une largeur et d'une hauteur forcera une fenêtre contextuelle, 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 un 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 des onglets en tant que préférences de navigateur, ne spécifiant même pas une largeur et une hauteur forcera une nouvelle fenêtre contextuelle pour eux.

Ainsi, le comportement de window.openChrome semble être d'ouvrir des fenêtres contextuelles dans un nouvel onglet lorsqu'il est utilisé dans un onclickévénement, de les ouvrir dans de nouvelles fenêtres lorsqu'il est utilisé à 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 de window.open différemment en ce qui concerne les préférences de navigation des utilisateurs. Vous ne pouvez pas vous attendre à ce que le même comportement window.opensoit vrai dans 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.

Lecture supplémentaire

Peter Mortensen
la source
12
Vous n'avez pas répondu à la question, vous venez de prouver que window.open est incohérent.
BentOnCoding
223

Bon mot:

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

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

Et si vous le souhaitez, sur cette base, vous pouvez créer une fonction:

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

et ensuite vous pouvez l'utiliser comme:

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

Note importante:

openInNewTab(ainsi que toute autre solution sur cette page) doit être appelée pendant le rappel de l'action de l'utilisateur - par exemple. événement de clic interne (pas nécessaire dans la fonction de rappel directement, mais pendant l'action de clic).

Si vous l'appelez manuellement à un moment aléatoire (par exemple, dans un intervalle ou après une réponse du serveur) - il pourrait être bloqué par le navigateur (ce qui est logique car ce serait un risque pour la sécurité et pourrait conduire à une très mauvaise expérience utilisateur )

pie6k
la source
8
Je vous remercie. Votre pure-JS a une pièce manquante - comme l'a écrit Luke Alderton (voir ci-dessous), vous devez attacher l'élément créé au corps du document, dans votre code il est suspendu dans le vide et au moins dans Firefox 37 il ne fait rien .
greenoldman
4
@mcginniwa Toute action comme celle-ci - si elle n'est pas déclenchée par une action de l'utilisateur comme un clic de souris, le bloqueur de fenêtres contextuelles se transformera. Imaginez que vous pouvez simplement ouvrir n'importe quelle URL avec Javascript sans action de l'utilisateur - ce serait assez dangereux. Si vous mettez ce code dans un événement comme la fonction de clic - cela fonctionnera bien - c'est la même chose avec toutes les solutions proposées ici.
pie6k
4
Vous pouvez simplifier votre code comme suit: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
shaedrich
5
@shaedrich inspiré par votre coupure, j'ai ajouté une doublure non jquery:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
pie6k
Cela ne fonctionne pas dans FF!
Nolesh
91

Si vous utilisez window.open(url, '_blank'), il sera bloqué (bloqueur de popup) 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;
};
Mohammed Safeer
la source
Mais dans cette question, ils ne mentionnent pas l'auteur du site. Je veux seulement ouvrir une URL dans une nouvelle fenêtre ou un nouvel onglet. Cela dépend du navigateur. Nous n'avons pas besoin de nous soucier de l'auteur. Veuillez vérifier ce violon. Ça marche
Mohammed Safeer
On constate que cela n'a pas fonctionné sur js fiddle et plunker, mais fonctionne lorsque vous créez un fichier html. C'est parce que js joue du violon, la sortie est affichée sur iframe, donc une nouvelle fenêtre est bloquée à cause dethe request was made in a sandboxed frame whose 'allow-popups' permission is not set
Mohammed Safeer
67

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 définis l'attribut cible, il ouvrira donc le lien dans un nouvel onglet ou une nouvelle fenêtre (en fonction des paramètres de l'utilisateur ).

Exemple d'une ligne dans 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.

Cela peut également être accompli simplement en utilisant les API DOM du navigateur natif:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
arikfr
la source
58

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

window.open(url, '_blank').focus();
Ezequiel García
la source
2
Cela peut s'ouvrir dans un nouvel onglet ou une nouvelle fenêtre en fonction des paramètres du navigateur. La question concerne spécifiquement l'ouverture dans un nouvel onglet même si les préférences concernent une nouvelle fenêtre.
Quentin
19

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 le nouvel onglet:

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

Mais cela peut s'ouvrir dans un nouvel onglet, selon les paramètres du navigateur:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
karaxuna
la source
2
Ceci est bloqué en tant que popup dans Firefox 28, Chrome 34b et Safari 7.0.2, tous les paramètres de stock. :(
Steve Meisner
1
"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" - vrai pour Chrome, mais pas vrai pour tous les navigateurs. Enregistrez <script>open('http://google.com')</script>dans un .htmlfichier et ouvrez-le dans une nouvelle installation d'une version récente de Firefox; vous remarquerez que Firefox ouvre joyeusement Google dans un nouvel onglet (peut-être après que vous lui ayez dit d'autoriser les fenêtres contextuelles), pas dans une nouvelle fenêtre.
Mark Amery
13

Le fait d'omettre simplement les paramètres [strWindowFeatures] ouvrira un nouvel onglet, À MOINS QUE le paramètre du navigateur ne remplace (le paramètre du navigateur l'emporte sur JavaScript).

Nouvelle fenetre

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

Nouvel onglet

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

-- ou --

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

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

CodeNinja
la source
4
Si vous utilisez cette méthode, assurez-vous que l'URL n'a pas de paramètres de requête car ils seront ignorés par la soumission de formulaire. Une solution consiste à incorporer des éléments d'entrée masqués à l'intérieur de l'élément de formulaire qui ont namecomme clé et valuevaleur pour tous les paramètres à l'intérieur des paramètres de requête. Et ensuite soumettre le formulaire
Mudassir Ali
cela peut être fait plus simplement avec une abalise au lieu d'un formulaire et en utilisant la .click()méthode jQuery pour la «soumettre». vérifier ma réponse
10

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.

Dans cette page, ouvrez une console JavaScript et tapez:

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

Et il essaiera 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 les conseils 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 il ne vous permettra pas de rediriger vers des pages externes à partir de 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
la source
1
J'ai fini par aller vers une solution différente où je fais w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)selon theandystratton.com/2012/…
Paul Tomblin
11
@FahadAbidJanjua Ce n'est absolument pas correct. Cela dépend toujours des paramètres du navigateur. Il n'y a rien dans les spécifications HTML ou Javascript qui déclare qu'une "action personnalisée" doit s'ouvrir dans une popup plutôt que dans un onglet. En effet, aucun des navigateurs de ma machine actuelle n'affiche ce comportement.
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
la source
1
Cela peut s'ouvrir dans un nouvel onglet ou une nouvelle fenêtre en fonction des paramètres du navigateur. La question concerne spécifiquement l'ouverture dans un nouvel onglet même si les préférences concernent une nouvelle fenêtre.
Quentin
3

JQuery

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

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Bryan
la source
Cela peut s'ouvrir dans un nouvel onglet ou une nouvelle fenêtre en fonction des paramètres du navigateur. La question concerne spécifiquement l'ouverture dans un nouvel onglet même si les préférences concernent une nouvelle fenêtre.
Quentin
2

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 popups ... Avec un peu de chance.

Luke Alderton
la source
2

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

J'ai trouvé un moyen simple de contourner:

É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! Fonctionne un charme pour moi.

ALZlper
la source
Cela peut s'ouvrir dans un nouvel onglet ou une nouvelle fenêtre en fonction des paramètres du navigateur. La question concerne spécifiquement l'ouverture dans un nouvel onglet même si les préférences concernent une nouvelle fenêtre.
Quentin
1

entrez la description de l'image ici

J'ai recherché beaucoup d'informations sur la façon d'ouvrir un nouvel onglet et de rester sur le même onglet. J'ai trouvé une petite astuce pour le faire. Supposons que vous ayez l'URL que vous devez ouvrir - newUrl et l'ancienne URL - currentUrl , sur laquelle vous devez rester après l'ouverture du nouvel onglet. Le code JS ressemblera à quelque chose comme ceci:

// 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
la source
La question concerne l'ouverture d'un nouvel onglet lorsque l'utilisateur préfère les ouvrir dans de nouvelles fenêtres. Il ne demande pas comment ouvrir une URL dans un nouvel onglet tout en ouvrant une autre URL dans l'onglet existant en même temps.
Quentin
0

Que diriez-vous de créer un <a>avec _blankcomme targetvaleur d'attribut et le urlcomme hrefavec affichage de style: caché avec un élément enfant? Ajoutez ensuite au DOM, puis déclenchez l'événement click sur un élément enfant.

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/

Victor
la source
-1

L'ouverture d'un nouvel onglet à partir d'une extension Firefox (Mozilla) se présente comme suit:

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

Cette méthode est similaire à la solution ci-dessus mais implémentée différemment

.social_icon -> une classe avec 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
la source
-1

Cela peut être un hack, mais dans Firefox si vous spécifiez un troisième paramètre, 'fullscreen = yes', il ouvre une nouvelle fenêtre.

Par exemple,

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

Il semble en fait remplacer les paramètres du navigateur.

Kunal
la source
-1

cela fonctionne pour moi, il suffit d'empêcher l'événement, d'ajouter l'URL à un, <a> tagpuis de déclencher l'événement de clic dessus 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
la source
Cela peut s'ouvrir dans un nouvel onglet ou une nouvelle fenêtre en fonction des paramètres du navigateur. La question concerne spécifiquement l'ouverture dans un nouvel onglet même si les préférences concernent une nouvelle fenêtre.
Quentin
-1

L' window.open(url)URL s'ouvrira dans le nouvel onglet du navigateur. Au-dessous de l'alternative 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

voici un exemple de travail (les extraits de stackoverflow ne permettent pas d'ouvrir un nouvel onglet)

Kamil Kiełczewski
la source
"Le window.open (url) ouvrira l'url dans le nouvel onglet du navigateur" - Il suivra la préférence de l'utilisateur pour une nouvelle fenêtre ou un nouvel onglet. Cela ne forcera pas un nouvel onglet lorsque la préférence est pour une fenêtre. (Quel est l'objet de la question). La même chose s'applique à target = _blank.
Quentin
Les deux approches que vous proposez ont été mentionnées (et critiquées) à plusieurs reprises dans les 56 réponses non supprimées précédentes sur cette question.
Quentin
-1

Que ce soit pour ouvrir l'URL dans un nouvel onglet ou une nouvelle fenêtre, est en fait contrôlé par les préférences du navigateur de l'utilisateur. Il n'y a aucun moyen de le remplacer en JavaScript.

window.open()se comporte différemment selon la façon dont il est utilisé. S'il est appelé comme résultat direct d'une action de l'utilisateur , disons un clic sur un bouton, cela devrait fonctionner correctement et ouvrir un nouvel onglet (ou fenêtre):

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

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

Cependant, si vous essayez d' ouvrir un nouvel onglet à partir d'un rappel de demande AJAX , le navigateur le bloquera car il s'agissait d'une action directe de l'utilisateur.

Pour contourner le bloqueur de popup et ouvrir un nouvel onglet à partir d'un rappel, voici un petit hack :

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
la source
-1

J'ai essayé de cette façon et cela semble bien fonctionner

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

J'ai trouvé beaucoup d'exemples de travail ici:

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

Artem Shevtsov
la source
Cela s'ouvrira dans un nouvel onglet ou une nouvelle fenêtre selon la préférence de l'utilisateur. Cela ne forcera pas un nouvel onglet sur lequel porte la question.
Quentin
Avez-vous raté la partie de la question lorsque le PO a déjà essayé cela? ou stackoverflow.com/a/59565074/19068 ? ou stackoverflow.com/a/35939565/19068 ? ou stackoverflow.com/a/30512485/19068 ? ou stackoverflow.com/a/11384018/19068 ? ou stackoverflow.com/a/26990478/19068 ?
Quentin
@Quentin J'ai raté cette partie, mais quand j'ai essayé d'appeler window.open avec le deuxième paramètre «windowName» égal à «_blank» ou sans lui, le popup ou le nouvel onglet ne sont pas apparus dans le dernier Google Chrome. Lorsque j'ai changé le nom de la fenêtre en «newWin», un nouvel onglet s'était ouvert. C'est étrange car le paramètre de nom de fenêtre est facultatif.
Artem Shevtsov
-4

Je vais être un peu d'accord avec la personne qui a écrit (paraphrasé ici): "Pour un lien dans une page Web existante, le navigateur ouvrira toujours le lien dans un nouvel onglet si la nouvelle page fait partie du même site Web que la page Web existante. " Pour moi, au moins, cette "règle générale" fonctionne dans Chrome, Firefox, Opera, IE, Safari, SeaMonkey et Konqueror.

Quoi qu'il en soit, il existe un moyen moins compliqué de profiter de ce que l'autre personne a présenté. En supposant que nous parlons de votre propre site Web ("thissite.com" ci-dessous), où vous voulez contrôler ce que fait le navigateur, puis, ci-dessous, vous voulez que "specialpage.htm" soit VIDE, sans HTML du tout ( fait gagner du temps lors de l'envoi de données depuis le serveur!).

 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
la source
-7

Si vous ne souhaitez ouvrir que les liens externes (liens qui pointent vers d'autres sites), ce bit de JavaScript / jQuery fonctionne bien:

$(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
la source
Cette réponse ne convient pas à cette question, mais c'est très utile, pensez! Merci pour ton idée!
Nuri Akman
-9

Le navigateur ouvrira toujours le lien dans un nouvel onglet si le lien se trouve sur le même domaine (sur le même site Web). Si le lien se trouve sur un autre domaine, il l'ouvrira dans un nouvel onglet / fenêtre, selon les paramètres du navigateur.

Donc, selon cela, nous pouvons utiliser:

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

Et ajoutez du code 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;
    });
});

Donc, ouvrez d'abord une nouvelle fenêtre sur le même site Web avec la cible _blank (il l'ouvrira dans un nouvel onglet), puis ouvrez le site Web souhaité dans cette nouvelle fenêtre.

loshMiS
la source