I'm trying to open a URL in a new tab, as opposed to a popup window. I've seen related questions where the responses would look something like:
window.open(url,'_blank');
window.open(url);
But none of them worked for me, the browser still tried to open a popup window.
window.open(url); opened it up in new tab of chrome and firefo - Raza Ahmed 2013-08-30 06:18
window.open("https://www.google.co.kr/_/chrome/newtab?ie=UTF-8") - Константин Ван 2018-01-23 06:48
In HTML ->
<button onClick="clickLink('#link')">Open Your Domain On New Tab</button>
<a id="link" href="https://yourdomain.com" target="_blank" hidden></a>
In Javascript ->
function clickLink(id) {
document.getElementById(id).click();
}ericgm 2018-02-06 11:30
Nothing an author can do can choose to open in a new tab instead of a new window. It is a user preference.
CSS3 proposed target-new, but the specification was abandoned.
The reverse is not true; by specifying dimensions for the window in the third argument of window.open, you can trigger a new window when the preference is for tabs.
window.open tells the browser to open something new, then the browser opens up what is chosen in its settings - tab or window. In the browsers you tested with, change the settings to open in a new window instead of a tab and you'll see the others' solutions are wrong - Ian 2013-04-18 13:53
window.open opens in a new tab for me all I did was window.open('myUrl') and it opened in a new tab. However if it didn't open in a new tab I would have been ok with that too so I wasnt as concerned about it - Mike Kellogg 2018-04-28 21:04
This is a trick,
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
In most cases, this should happen directly in the onclick handler for the link to prevent pop-up blockers, and the default "new window" behavior. You could do it this way, or by adding an event listener to your DOM object.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
http://www.tutsplanet.com/open-url-new-tab-using-javascript/
a tags do not have target="_blank" in the - Alex 2012-11-02 09:51
window.open (or any Javascript) to choose how to open the new window/tab - Ian 2013-04-18 13:55
the '_blank' isn't necessary, for window.open(), the second parameter is strWindowName, for: A string name for the new window. The name can be used as the target of links and forms using the target attribute of an or
window.open() will not open in a new tab if it is not happening on the actual click event. In the example given the URL is being opened on the actual click event. This will work provided the user has appropriate settings in the browser.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Similarly, if you are trying to do an Ajax call within the click function and want to open a window on success, ensure you are doing the Ajax call with the async : false option set.
window.open. The second parameter being "_blank" doesn't change anything. Therefore there's no difference here. And the fact they claim "window.open() will not open in new tab if it is not happening on actual click event." is wrong as well. Settings in the browser are the reasoning for anything happening, not Javascript cod - Ian 2013-04-19 18:49
window.open calls differ from secure ones..ON CHROME. I just tested the same thing on Firefox and IE and both open in a new tab. Here's an example so you can test your little heart out: http://jsfiddle.net/gEuMK/ . Why would you endorse a solution that is inconsistent between browsers and only "works" on one, even though you can't control which happens - a real, secure event or a random/insecure one - Ian 2013-04-19 19:25
window.open Cannot Reliably Open Popups in a New Tab in All BrowsersDifferent browsers implement the behavior of window.open in different ways, especially with regard to a user's browser preferences. You cannot expect the same behavior for window.open to be true across all of Internet Explorer, Firefox, and Chrome, because of the different ways in which they handle a user's browser preferences.
For example, Internet Explorer (11) users can choose to open popups in a new window or a new tab, you cannot force Internet Explorer 11 users to open popups in a certain way through window.open, as alluded to in Quentin's answer.
As for Firefox (29) users, using window.open(url, '_blank') depends on their browser's tab preferences, though you can still force them to open popups in a new window by specifying a width and height (see "What About Chrome?" section below).
Go to your browser's settings and configure it to open popups in a new window.
After setting up Internet Explorer (11) to open popups in a new window as demonstrated above, use the following test page to test 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>
Observe that the popups are opened in a new window, not a new tab.
You can also test those snippets above in Firefox (29) with its tab preference set to new windows, and see the same results.
window.open Differently from Internet Explorer (11) and Firefox (29).I'm not 100% sure, but it looks like Chrome (version 34.0.1847.131 m) does not appear to have any settings that the user can use to choose whether or not to open popups in a new window or a new tab (like Firefox and Internet Explorer have). I checked the Chrome documentation for managing pop-ups, but it didn't mention anything about that sort of thing.
Also, once again, different browsers seem to implement the behavior of window.open differently. In Chrome and Firefox, specifying a width and height will force a popup, even when a user has set Firefox (29) to open new windows in a new tab (as mentioned in the answers to JavaScript open in a new window, not tab):
<!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>
However, the same code snippet above will always open a new tab in Internet Explorer 11 if users set tabs as their browser preferences, not even specifying a width and height will force a new window popup for them.
So the behavior of window.open in Chrome seems to be to open popups in a new tab when used in an onclick event, to open them in new windows when used from the browser console (as noted by other people), and to open them in new windows when specified with a width and a height.
Different browsers implement the behavior of window.open differently with regard to users' browser preferences. You cannot expect the same behavior for window.open to be true across all of Internet Explorer, Firefox, and Chrome, because of the different ways in which they handle a user's browser preferences.
One liner:
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
It creates a virtual a element, gives it target="_blank" so it opens in new tab, gives it proper url href and then clicks it.
And if you want, based on that you can create some function:
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
href,
}).click();
}
and then you can use it like:
openInNewTab("http://google.com");
$('<a />',{'href': url, 'target', '_blank'}).get(0).click();shaedrich 2017-12-22 17:20
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();pie6k 2018-01-05 12:07
To elaborate Steven Spielberg's answer, I did this in such a case:
$('a').click(function() {
$(this).attr('target', '_blank');
});
This way, just before the browser will follow the link I'm setting the target attribute, so it will make the link open in a new tab or window (depends on user's settings).
If you use window.open(url, '_blank'), it will be blocked (popup blocker) on Chrome.
Try this:
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
the request was made in a sandboxed frame whose 'allow-popups' permission is not setMohammed Safeer 2017-02-08 20:08
I use the following and it works very well!!!
window.open(url, '_blank').focus();
.focus() does not affect whether the new page is opened in a window or a tab since it takes place after the .open() call, and window.open(url, '_blank') is literally exactly the code that the question asker included in the question and which he and many other posters here have explained does not work - Mark Amery 2016-05-15 22:04
An interesting fact is that the new tab can not be opened if the action is not invoked by the user (clicking a button or something) or if it is asynchronous, for example, this will NOT open in new tab:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
But this may open in a new tab, depending on browser settings:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});
<script>open('http://google.com')</script> to a .html file and open it in a fresh install of a recent version of Firefox; you will observe that Firefox happily opens Google in a new tab (perhaps after you tell it to allow popups), not a new window - Mark Amery 2016-05-15 21:53
I think that you can't control this. If the user had setup their browser to open links in a new window, you can't force this to open links in a new tab.
Just omitting [strWindowFeatures] parameters will open a new tab, UNLESS the browser setting overrides (browser setting trumps JavaScript).
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
var myWin = window.open(strUrl, strWindowName);
-- or --
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')))
You can use a trick with 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();
}
name as key & value as value for all the parameters inside query params. And then submit the for - Mudassir Ali 2016-02-16 12:49
a tag instead of a form, and using the jQuery .click() method to "submit" it. check my answerNoName 2016-03-24 21:37
<button id='btn'>click me</button>, clicked the button, and... got a new window, not a new tab. Can you specify any circumstance whatsoever in which a form submit would open in a new tab when a simple window.open would open in a new window? I don't believe any such circumstance exists - Mark Amery 2016-05-15 22:01
This has nothing to do with browser settings if you are trying to open a new tab from a custom function.
In this page, open a JavaScript console and type:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
And it will try to open a popup regardless of your settings, because the 'click' comes from a custom action.
In order to behave like an actual 'mouse click' on a link, you need to follow @spirinvladimir's advice and really create it:
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'))));
Here is a complete example (do not try it on jsFiddle or similar online editors, as it will not let you redirect to external pages from there):
<!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>
w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...) as per http://theandystratton.com/2012/how-to-bypass-google-chromes-javascript-popup-blocke - Paul Tomblin 2014-01-30 14:19
Or you could just create a link element and click it...
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);
This shouldn't be blocked by any popup blockers... Hopefully.
I found an easy work around:
Step 1: Create an invisible link:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Step 2: Click on that link programmatically:
document.getElementById("yourId").click();
Here you go! Works a charm for me.
If it is something that you are just trying to load onto the element, try using this. On page load it will add your target property with the correct attribute.
$(your_element_here).prop('target', '_blank');
How about creating an <a> with _blank as target attribute value and the url as href, with style display:hidden with a a children element? Then add to the DOM and then trigger the click event on a children element.
That doesn't work. The browser prevents the default behaviour. It could be triggered programmatically, but it doesn't follow the default behaviour.
Check and see for yourself: http://jsfiddle.net/4S4ET/
This might be a hack, but in Firefox if you specify a third parameter, 'fullscreen=yes', it opens a fresh new window.
For example,
<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>
It seems to actually override the browser settings.
Opening a new tab from within a Firefox (Mozilla) extension goes like this:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");
This way is similar to the above solution but implemented differently
.social_icon -> some class with 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();
});
this work for me, just prevent the event, add the url to an <a> tag then trigger the click event on that 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>
I'm going to agree somewhat with the person who wrote (paraphrased here): "For a link in an existing web page, the browser will always open the link in a new tab if the new page is part of the same web site as the existing web page." For me, at least, this "general rule" works in Chrome, Firefox, Opera, IE, Safari, SeaMonkey, and Konqueror.
Anyway, there is a less complicated way to take advantage of what the other person presented. Assuming we are talking about your own web site ("thissite.com" below), where you want to control what the browser does, then, below, you want "specialpage.htm" to be EMPTY, no HTML at all in it (saves time sending data from the server!).
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
}
Specify a default target for all hyperlinks and forms on a page (non-JavaScript):
<head>
<base target="_blank">
</head>
If you only want to open the external links (links that go to other sites) then this bit of JavaScript/jQuery works well:
$(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');
}
});
});
The browser will always open the link in a new tab if the link is on the same domain (on the same website). If the link is on some other domain it will open it in a new tab/window, depending on browser settings.
So, according to this, we can use:
<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>
And add some jQuery code:
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;
});
});
So, first open new window on same website with _blank target (it will open it in new tab), and then open your desired website inside that new window.
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)