Ouvrez une URL dans un nouvel onglet (et pas une nouvelle fenêtre) en utilisant JavaScript

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 ressemblaient à quelque chose comme:

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

Mais aucun d'eux n'a travaillé pour moi, le navigateur essayait toujours d'ouvrir une fenêtre contextuelle.

Rien qu'un auteur peut faire peut choisir d'ouvrir dans un nouvel onglet au lieu d'une nouvelle fenêtre. C'est une préférence pour les utilisateurs .

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 concerne les onglets.

C'est un tour,

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

Dans la plupart des cas, cela devrait se produire directement dans le onclick pour le lien pour empêcher les bloqueurs de pop-up et le comportement par défaut de la "nouvelle fenêtre". Vous pouvez le faire de cette façon, ou en ajoutant un auditeur d'événements à votre objet DOM .

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

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

window.open() ne s'ouvre pas dans un nouvel onglet si cela ne se produit pas sur l'événement de clic réel. Dans l'exemple donné, l'URL est ouverte sur l'événement de clic réel. Cela fonctionnera à condition que l'utilisateur ait les 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 d'effectuer l'appel Ajax avec le jeu d'options async : false .

window.open Impossible d' window.open popups dans un nouvel onglet dans tous les navigateurs

Différents navigateurs implémentent le comportement de window.open de différentes façons, 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 de window.open soit vrai dans tout Internet Explorer, Firefox et Chrome, en raison des différentes façons dont ils traitent les préférences d'un navigateur.

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 window.open une certaine manière via window.open , comme l'a mentionné la réponse de Quentin .

En ce qui concerne les utilisateurs de Firefox (29), l'utilisation de window.open(url, '_blank') dépend des préférences de l'onglet de votre navigateur, bien que vous puissiez les forcer à ouvrir des fenêtres pop-up dans une nouvelle fenêtre en spécifiant une largeur et une hauteur (voir "What About Chrome? "Ci-dessous).

Manifestation

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

Internet Explorer (11)

Boîte de dialogue des paramètres 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 pop-up dans une nouvelle fenêtre, comme cela a été démontré 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 fenêtres pop-up sont ouvertes 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 une nouvelle fenêtre et voir les mêmes résultats.

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

Je ne suis pas sûr de 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 pop-up dans une nouvelle fenêtre ou un nouvel onglet (comme Firefox et Internet Explorer ont). J'ai vérifié la documentation Chrome pour la gestion des fenêtres contextuelles , mais cela ne mentionnait rien de ce genre de chose.

En outre, encore une fois, différents navigateurs semblent implémenter le comportement de window.open différemment. Dans Chrome et Firefox, spécifier une largeur et une hauteur forceront un popup, même si un utilisateur a configuré Firefox (29) pour ouvrir une nouvelle fenêtre 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 préférences de leur navigateur, même sans spécifier une largeur et une hauteur, forceront une nouvelle fenêtre pour eux.

Ainsi, le comportement de window.open dans Chrome semble être d'ouvrir des fenêtres pop-up dans un nouvel onglet lorsqu'il est utilisé dans un événement onclick , pour les ouvrir dans une nouvelle fenêtre lorsqu'elle est utilisée à partir de la console du navigateur ( comme l'ont noté d'autres personnes ) et pour les ouvrir Dans les nouvelles fenêtres lorsqu'elles sont spécifiées 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 des navigateurs des utilisateurs. Vous ne pouvez pas vous attendre à ce que le même comportement de window.open soit vrai dans tout Internet Explorer, Firefox et Chrome, en raison des différentes façons dont ils traitent les préférences d'un navigateur.

Lecture supplémentaire

  • window.open documentation .

Avec jQuery, j'utilise celui-ci:

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

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

Et si vous voulez, en fonction de cela, vous pouvez créer une fonction:

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

Et vous pouvez l'utiliser comme suit:

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

Pour un scénario non jQuery , 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"); 

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

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

Essaye ça:

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

Je pense que vous ne pouvez pas contrôler cela. Si l'utilisateur a configuré son navigateur pour ouvrir des liens dans une nouvelle fenêtre, vous ne pouvez pas forcer ceci pour ouvrir des liens dans un nouvel onglet.

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

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 s'il est asynchrone, par exemple, cela NE SERA PAS ouvert dans un 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'); } }); 

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

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

En omettant simplement les paramètres [strWindowFeatures], vous ouvrez un nouvel onglet, À MOINS que le paramètre du navigateur ne soit remplacé (le réglage du navigateur augmente le JavaScript).

Nouvelle fenetre

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

Nouvel onglet

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

— ou —

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

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 tentera d'ouvrir un popup indépendamment de vos paramètres, car le «clic» provient d'une action personnalisée.

Pour se comporter comme un "clic de souris" sur un lien, vous devez suivre les conseils de @ spirinvladimir et le créer vraiment :

 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 pas l'essayer 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> 

Vous pouvez utiliser un truc 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

L'ouverture d'un nouvel onglet dans une extension Firefox (Mozilla) va comme ceci:

 gBrowser.selectedTab = gBrowser.addTab("http://example.com"); 

Ou vous pouvez simplement créer un élément de lien et le cliquer …

 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 fenêtres contextuelles … J'espère.

De cette façon, cela ressemble à la solution ci-dessus mais a été mis en œuvre différemment

.social_icon -> certains cours 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(); }); 

Que diriez-vous de créer un <a> avec _blank comme valeur d'attribut target et l' url tant que href , avec affichage de style: caché avec un élément enfant? Ensuite, ajoutez au DOM, puis déclenchez l'événement de clic sur un élément enfant.

METTRE À JOUR

Cela ne fonctionne pas. Le navigateur empêche le comportement par défaut. Il pourrait être déclenché par programme, mais il ne suit pas le comportement par défaut.

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

Ce pourrait ê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 que les paramètres du navigateur dépassent.

Spécifiez une cible par défaut pour tous les hyperliens et les formulaires sur une page (non-JavaScript):

 <head> <base target="_blank"> </head> 

Il y a maintenant une NOUVELLE solution de contournement !!!

(Yay!)

Disons que nous avons un div avec id="link_pseudo" et un a id="link_real" , target="_blank" , et un href .

HTML:

 <div id="link_pseudo"> ... </div> <a id="link_real" target="_blank" href="example.com">...</a> 

Nous pouvons simuler un clic sur a lorsque vous cliquez sur le div en utilisant l'implémentation eventFire réalisée par KooiInc 1 .

JavaScript 1 :

 function eventFire(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } } 

Utilisation 1 :

 eventFire([some element], 'click'); 

Exécution:

Si vous ajoutez onclick="eventFire(document.getElementById('link_real','click')" au div et ajoutez la solution 1 de KooiInc au script, en cliquant sur le div, il imitera un clic sur la balise a.

Nouveau HTML:

 <div id="link_pseudo" onclick="eventFire(document.getElementById('link_real','click')"> ... </div> <a id="link_real" target="_blank" href="example.com">...</a> <script> function eventFire(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } } </script> 

*[1]KooiInc's Answer

Je sais, c'est piquante, mais cela s'appelle une solution de contournement pour une raison quelconque.

Je conviens un peu avec la personne qui a écrit (paraphrasée 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 une manière moins compliquée 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 souhaitez contrôler ce que le navigateur fait, puis, ci-dessous, vous souhaitez que "specialpage.htm" soit VIDÉ, aucun HTML dans son intégralité ( Permet d'économiser du temps à envoyer des données du 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 } 

Si vous souhaitez seulement ouvrir les liens externes (liens qui vont 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'); } }); }); 

Somehow a website can do it. (I don't have the time to extract it from this mess, but this is the code)

 if (!Array.prototype.indexOf) Array.prototype.indexOf = function(searchElement, fromIndex) { if (this === undefined || this === null) throw new TypeError('"this" is null or not defined'); var length = this.length >>> 0; fromIndex = +fromIndex || 0; if (Math.abs(fromIndex) === Infinity) fromIndex = 0; if (fromIndex < 0) { fromIndex += length; if (fromIndex < 0) fromIndex = 0 } for (; fromIndex < length; fromIndex++) if (this[fromIndex] === searchElement) return fromIndex; return -1 }; (function Popunder(options) { var _parent, popunder, posX, posY, cookieName, cookie, browser, numberOfTimes, expires = -1, wrapping, url = "", size, frequency, mobilePopupDisabled = options.mobilePopupDisabled; if (this instanceof Popunder === false) return new Popunder(options); try { _parent = top != self && typeof top.document.location.toString() === "string" ? top : self } catch (e) { _parent = self } cookieName = "adk2_popunder"; popunder = null; browser = function() { var n = navigator.userAgent.toLowerCase(), b = { webkit: /webkit/.test(n), mozilla: /mozilla/.test(n) && !/(compatible|webkit)/.test(n), chrome: /chrome/.test(n), msie: /msie/.test(n) && !/opera/.test(n), firefox: /firefox/.test(n), safari: /safari/.test(n) && !/chrome/.test(n), opera: /opera/.test(n) }; b.version = b.safari ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/:]([\d.]+)/) || [])[1]; return b }(); initOptions(options); function initOptions(options) { options = options || {}; if (options.wrapping) wrapping = options.wrapping; else { options.serverdomain = options.serverdomain || "ads.adk2.com"; options.size = options.size || "800x600"; options.ci = "3"; var arr = [], excluded = ["serverdomain", "numOfTimes", "duration", "period"]; for (var p in options) options.hasOwnProperty(p) && options[p].toString() && excluded.indexOf(p) === -1 && arr.push(p + "=" + encodeURIComponent(options[p])); url = "http://" + options.serverdomain + "/player.html?rt=popunder&" + arr.join("&") } if (options.size) { size = options.size.split("x"); options.width = size[0]; options.height = size[1] } if (options.frequency) { frequency = /([0-9]+)\/([0-9]+)(\w)/.exec(options.frequency); options.numOfTimes = +frequency[1]; options.duration = +frequency[2]; options.period = ({ m: "minute", h: "hour", d: "day" })[frequency[3].toLowerCase()] } if (options.period) switch (options.period.toLowerCase()) { case "minute": expires = options.duration * 60 * 1e3; break; case "hour": expires = options.duration * 60 * 60 * 1e3; break; case "day": expires = options.duration * 24 * 60 * 60 * 1e3 } posX = typeof options.left != "undefined" ? options.left.toString() : window.screenX; posY = typeof options.top != "undefined" ? options.top.toString() : window.screenY; numberOfTimes = options.numOfTimes } function getCookie(name) { try { var parts = document.cookie.split(name + "="); if (parts.length == 2) return unescape(parts.pop().split(";").shift()).split("|") } catch (err) {} } function setCookie(value, expiresDate) { expiresDate = cookie[1] || expiresDate.toGMTString(); document.cookie = cookieName + "=" + escape(value + "|" + expiresDate) + ";expires=" + expiresDate + ";path=/" } function addEvent(listenerEvent) { if (document.addEventListener) document.addEventListener("click", listenerEvent, false); else document.attachEvent("onclick", listenerEvent) } function removeEvent(listenerEvent) { if (document.removeEventListener) document.removeEventListener("click", listenerEvent, false); else document.detachEvent("onclick", listenerEvent) } function isCapped() { cookie = getCookie(cookieName) || []; return !!numberOfTimes && +numberOfTimes <= +cookie[0] } function pop() { var features = "type=fullWindow, fullscreen, scrollbars=yes", listenerEvent = function() { var now, next; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) if (mobilePopupDisabled) return; if (isCapped()) return; if (browser.chrome && parseInt(browser.version.split(".")[0], 10) > 30 && adParams.openNewTab) { now = new Date; next = new Date(now.setTime(now.getTime() + expires)); setCookie((+cookie[0] || 0) + 1, next); removeEvent(listenerEvent); window.open("javascript:window.focus()", "_self", ""); simulateClick(url); popunder = null } else popunder = _parent.window.open(url, Math.random().toString(36).substring(7), features); if (wrapping) { popunder.document.write("<html><head></head><body>" + unescape(wrapping || "") + "</body></html>"); popunder.document.body.style.margin = 0 } if (popunder) { now = new Date; next = new Date(now.setTime(now.getTime() + expires)); setCookie((+cookie[0] || 0) + 1, next); moveUnder(); removeEvent(listenerEvent) } }; addEvent(listenerEvent) } var simulateClick = function(url) { var a = document.createElement("a"), u = !url ? "data:text/html,<script>window.close();<\/script>;" : url, evt = document.createEvent("MouseEvents"); a.href = u; document.body.appendChild(a); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null); a.dispatchEvent(evt); a.parentNode.removeChild(a) }; function moveUnder() { try { popunder.blur(); popunder.opener.window.focus(); window.self.window.focus(); window.focus(); if (browser.firefox) openCloseWindow(); else if (browser.webkit) openCloseTab(); else browser.msie && setTimeout(function() { popunder.blur(); popunder.opener.window.focus(); window.self.window.focus(); window.focus() }, 1e3) } catch (e) {} } function openCloseWindow() { var tmp = popunder.window.open("about:blank"); tmp.focus(); tmp.close(); setTimeout(function() { try { tmp = popunder.window.open("about:blank"); tmp.focus(); tmp.close() } catch (e) {} }, 1) } function openCloseTab() { var ghost = document.createElement("a"), clk; document.getElementsByTagName("body")[0].appendChild(ghost); clk = document.createEvent("MouseEvents"); clk.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null); ghost.dispatchEvent(clk); ghost.parentNode.removeChild(ghost); window.open("about:blank", "PopHelper").close() } pop() })(adParams)