在新选项卡中打开URL（而不是新窗口）

小开

最佳答案

作者无法选择在新选项卡而不是新窗口中打开；它是用户偏好。（请注意，大多数浏览器中的默认用户首选项是新选项卡，因此，在浏览器上未更改首选项的简单测试将无法证明这一点。）

反转的不是真的；通过在window.open()的第三个参数中为窗口指定某些窗口功能，当首选项是选项卡时，您可以触发一个新窗口。

小开

我认为您无法控制这一点。如果用户已将浏览器设置为在新窗口中打开链接，则无法强制在新选项卡中打开链接。

JavaScript在新窗口中打开，而不是选项卡

小开

为了详细说明史蒂芬·斯皮尔伯格的回答，我在这样的情况下这样做：
$('a').click(function() {$(this).attr('target', '_blank');});
这样，就在浏览器将遵循链接之前，我正在设置目标属性，因此它将使链接在新选项卡或窗口中打开（取决于用户的设置）。
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.
这也可以仅使用本机浏览器DOM API来完成：
document.querySelector('a').setAttribute('target', '_blank');document.querySelector('a').click();

小开

这是个诡计，
function openInNewTab(url) {window.open(url, '_blank').focus();} // Or justwindow.open(url, '_blank').focus();
在大多数情况下，这应该直接发生在链接的onclick处理程序中，以防止弹出阻止器和默认的“新窗口”行为。您可以这样做，或者通过向您的DOM对象添加事件侦听器。
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
参考：使用JavaScript在新标签中打开一个URL

小开

如果实际的单击事件没有发生，window.open()将不会在新选项卡中打开。在给定的示例中，URL正在实际的单击事件上打开。这将工作提供用户有适当的设置在浏览器。

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

类似地，如果您尝试在Click函数中执行Ajax调用并希望在成功时打开一个窗口，请确保您正在使用async : false选项集进行Ajax调用。

小开

如果链接在同一域（在同一网站上），浏览器将始终在新选项卡中打开链接。如果链接在其他域上，它将在新选项卡/窗口中打开它，具体取决于浏览器设置。

因此，根据这一点，我们可以使用：

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

并添加一些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;});});

因此，首先在同一网站上打开具有_blank目标的新窗口（它将在新选项卡中打开它），然后在新窗口中打开所需的网站。

小开

如果您只想打开外部链接（指向其他网站的链接），那么这一点JavaScript/jQuery效果很好：

$(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');}});});

小开

一个有趣的事实是，如果用户没有调用操作（单击按钮或其他东西），或者如果它是异步的，则无法打开新选项卡，例如，这将在新选项卡中打开没有：
$.ajax({url: "url",type: "POST",success: function() {window.open('url', '_blank');}});
但这可能会在新选项卡中打开，具体取决于浏览器设置：
$.ajax({url: "url",type: "POST",async: false,success: function() {window.open('url', '_blank');}});

小开

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

小开

或者您可以创建一个链接元素并单击它…

var evLink = document.createElement('a');evLink.href = 'http://' + strUrl;evLink.target = '_blank';document.body.appendChild(evLink);evLink.click();// Now delete itevLink.parentNode.removeChild(evLink);

这不应该被任何弹出窗口拦截器阻止…希望如此。

小开

这与浏览器设置无关如果您尝试从自定义函数打开新选项卡。
在此页面中，打开一个JavaScript控制台并键入：
document.getElementById("nav-questions").setAttribute("target", "_blank");document.getElementById("nav-questions").click();
无论您的设置如何，它都会尝试打开弹出窗口，因为“单击”来自自定义操作。
为了表现得像链接上的实际“鼠标点击”，您需要按照斯皮因拉迪米尔的建议和真的创建它：
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'))));
这是一个完整的示例（不要在jsFiddle或类似的在线编辑器上尝试，因为它不会让您从那里重定向到外部页面）：
<!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>

小开

如何创建一个<a>，其中_blank为target属性值，url为href，样式显示：隐藏与子元素？然后添加到DOM，然后触发子元素的单击事件。

更新

这不起作用。浏览器阻止默认行为。它可以以编程方式触发，但它不遵循默认行为。

自己看看吧：http://jsfiddle.net/4S4ET/

小开

浏览器对如何处理window.open有不同的行为
您不能期望所有浏览器的行为都是相同的。window.open不能可靠地跨浏览器打开新选项卡上的弹出窗口，它还取决于用户的偏好。
例如，在Internet Explorer（11）上，用户可以选择在新窗口或新选项卡中打开弹出窗口，您不能强制Internet Explorer 11通过window.open以某种方式打开弹出窗口，如昆汀的回答中所述。
至于Firefox（29），window.open(url, '_blank')取决于浏览器的选项卡首选项，的行为，尽管您仍然可以通过指定宽度和高度来强制它在弹出窗口中打开URL（请参阅下面的“Chrome”部分）。
Internet Explorer（11）
您可以将Internet Explorer设置为在新窗口中打开弹出窗口：
执行此操作后，尝试运行window.open(url)和window.open(url, '_blank')。注意打开的页面在新窗口中，而不是新选项卡中。
Firefox（29）
您还可以设置选项卡首选项以打开新窗口，并查看相同的结果。
Chrome
看起来Chrome（版本34）没有选择在新窗口或新选项卡中打开弹出窗口的任何设置。虽然，讨论了一些方法（编辑注册表）在这个问题。
在Chrome和Firefox中，指定宽度和高度将强制弹出（如答案这里中所述），即使用户已将Firefox设置为在新选项卡中打开新窗口

let url = 'https://stackoverflow.com'window.open(url, '', 'width=400, height=400')
但是，在Internet Explorer 11中，如果在浏览器首选项中选择标签，则相同的代码将始终在新选项卡中打开链接，指定宽度和高度将没有强制弹出新窗口。
在Chrome，似乎window.open在onclick事件中使用时打开一个新选项卡，在浏览器控制台（正如其他人所指出的）使用时打开一个新窗口，并在指定宽度和高度时打开弹出窗口。
补充阅读：window.open留档。

小开

我在某种程度上同意这样写的人：“对于现有网页中的链接，如果新页面与现有网页属于同一网站，浏览器将始终在新选项卡中打开该链接。”至少对我来说，这个“一般规则”适用于Chrome、Firefox、Opera、Internet Explorer、Safari、SeaMonkey和Konqueror。
无论如何，有一种不太复杂的方法可以利用其他人提供的内容。假设我们谈论的是您自己的网站（下面的“thissite.com”），您想控制浏览器的功能，然后，在下面，您希望“specialpage.htm”是空，其中根本没有超文本标记语言（它节省了从服务器发送数据的时间！）。
var wnd, URL; // Global variables // Specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing pagewnd = 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 destinationsetTimeout(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 pagewnd.focus(); // When browser not set to automatically show newly-opened page, this MAY work}

小开

不知何故，一个网站可以做到这一点。（我没有时间从这个混乱中提取它，但这就是代码。）
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);elsedocument.attachEvent("onclick", listenerEvent)} function removeEvent(listenerEvent) {if (document.removeEventListener)document.removeEventListener("click", listenerEvent, false);elsedocument.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} elsepopunder = _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();elsebrowser.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)

小开

这可能是一个黑客攻击，但在Firefox中，如果您指定第三个参数“fullScreen=yes”，它会打开一个新的窗口。

例如，

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

它似乎实际上覆盖了浏览器设置。

小开

从Firefox（Mozilla）扩展中打开一个新选项卡，如下所示：

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

小开

只需省略strWindowFeatures参数就会打开一个新选项卡，除非浏览器设置会覆盖它（浏览器设置胜过JavaScript）。
新窗口
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
新标签
var myWin = window.open(strUrl, strWindowName);
--或者--
var myWin = window.open(strUrl);

小开

这将创建一个虚拟a元素，给它target="_blank"，因此它在一个新选项卡中打开，给它正确的URLhref，然后单击它。
function openInNewTab(href) {Object.assign(document.createElement('a'), {target: '_blank',rel: 'noopener noreferrer',href: href,}).click();}
然后你可以像这样使用它：
openInNewTab("https://google.com");
重要提示：
这必须在所谓的“可信事件”回调期间调用-例如，在单击事件（在回调函数中不是直接必需的，而是在单击操作期间）。否则打开新页面将被浏览器阻止。
如果您在某个随机时刻手动调用它（例如，在间隔内或在服务器响应之后），它可能会被浏览器阻止（这是有道理的，因为它会带来安全风险并可能导致糟糕的用户体验）。

小开

这种方式类似于前面的解决方案，但实现方式不同：
.social_icon->一些带有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 solutionwin.focus();});

小开

如果您使用window.open(url, '_blank')，它将在Chrome上被阻止（弹出阻止器）。

试试这个：

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

使用纯JavaScript，

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

小开

您可以使用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();}

jsFiddle demo

小开

我使用以下方法，效果非常好！

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

小开

这对我很有效。只需阻止该事件，将URL添加到<a>tag，然后触发该tag上的单击事件。
javascript
$('.myBtn').on('click', function(event) {event.preventDefault();$(this).attr('href', "http://someurl.com");$(this).trigger('click');});
超文本标记语言
<a href="#" class="myBtn" target="_blank">Go</a>

小开

这个问题有一个答案，不是没有。
我找到了一个简单的解决方法：
步骤1：创建不可见链接：
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
第2步：以编程方式单击该链接：
document.getElementById("yourId").click();
给你！它对我很有魅力。

小开

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

小开

jQuery
$('<a />',{'href': url, 'target': '_blank'}).get(0).click();
javascript
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

小开

要打开新选项卡并停留在同一位置，您可以在新选项卡中打开当前页面，并将旧选项卡重定向到新URL。
let newUrl = 'http://example.com';let currentUrl = window.location.href;window.open(currentUrl , '_blank'); // Open window with the URL of the current pagelocation.href = newUrl; // Redirect the previous window to the new URL
您将被浏览器自动移动到新打开的选项卡。它看起来像您的页面被重新加载，您将停留在同一页面但在新窗口上：

小开

window.open(url)将在新浏览器选项卡中打开URL。以下是它的JavaScript替代方案：
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 the DOM, because we did not add it
这是一个工作示例（Stack Overflow片段不允许打开新选项卡）。

小开

是否在新选项卡或新窗口中打开URL，实际上是由用户的浏览器偏好控制的。在JavaScript中无法覆盖它。
window.open()的行为取决于它的使用方式。如果是作为用户操作的直接结果调用，让我们说单击按钮，它应该可以正常工作并打开一个新选项卡（或窗口）：
const button = document.querySelector('#openTab'); // add click event listenerbutton.addEventListener('click', () => {// open a new tabconst tab = window.open('https://attacomsian.com', '_blank');});
但是，如果您尝试从AJAX请求回调打开一个新选项卡，浏览器将阻止它，因为它不是直接的用户操作。
要绕过弹出窗口拦截器并从回调打开一个新选项卡，这里是小黑客：
const button = document.querySelector('#openTab'); // add click event listenerbutton.addEventListener('click', () => { // open an empty windowconst tab = window.open('about:blank'); // make an API callfetch('/api/validate').then(res => res.json()).then(json => { // TODO: do something with JSON response // update the actual URLtab.location = 'https://attacomsian.com';tab.focus();}).catch(err => {// close the empty windowtab.close();});});

小开

不要使用"_blank"
始终为该窗口使用特定名称，在我的情况下为meaningfulName。在这种情况下，您可以节省处理器资源：
button.addEventListener('click', () => {window.open('https://google.com', 'meaningfulName')})
通过这种方式，例如，当您单击按钮10次时，浏览器将始终在一个新选项卡中重新呈现它，而不是在10个不同的选项卡中打开它，这将消耗更多资源。
您可以在MDN上阅读更多信息。

小开

有很多答案副本建议使用“_blank”作为目标，但我发现这不起作用。正如Prakash所说，这取决于浏览器。但是，您可以向浏览器提出某些建议，例如窗口是否应该有位置栏。
如果你建议足够类似制表符的东西你<强>可能得到一个标签，根据Nico对Chrome这个更具体问题的回答：
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
免责声明：这不是灵丹妙药。它仍然取决于用户和浏览器。现在至少您已经为您希望的窗口外观指定了一个偏好。