我试图在一个新的选项卡中打开一个URL，而不是弹出窗口。
我见过一些相关的问题，其中的回答大致如下：
window.open(url,'_blank');
window.open(url);
但没有一个对我有效，浏览器仍然试图打开一个弹出窗口。
作者无法选择在新选项卡而不是新窗口中打开；这是用户偏好。（请注意，大多数浏览器中的默认用户首选项是针对新选项卡的，因此在未更改该首选项的浏览器上进行的简单测试不会证明这一点。）
CSS3提出了新的目标，但该规范被放弃。
反之则不然；通过在window.open（）的第三个参数中为窗口指定某些窗口特性，当首选项是选项卡时，可以触发一个新窗口。
为了阐述史蒂文·斯皮尔伯格的答案，我在这样一个案例中这样做了：
$('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 just
window.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 target在同一个网站上打开新窗口（它将在新选项卡中打开），然后在新窗口中打开您想要的网站。
如果您只想打开外部链接（指向其他站点的链接），那么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 it
evLink.parentNode.removeChild(evLink);
这不应该被任何弹出窗口阻止程序阻止。。。有希望地
如果您试图从自定义功能打开新选项卡，则这与浏览器设置无关。
在此页面中，打开JavaScript控制台并键入：
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
它会尝试打开一个弹出窗口，而不管您的设置如何，因为“点击”来自自定义操作。
为了表现得像一个链接上的实际“鼠标点击”，您需要遵循spirinvradimir的建议并真正创建它：
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作为目标属性值，url作为href，样式显示：隐藏在a子元素中？然后添加到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（版本34）没有任何设置来选择在新窗口或新选项卡中打开弹出窗口。不过，在这个问题中讨论了一些方法（编辑注册表）。
在Chrome和Firefox中，即使用户将Firefox设置为在新选项卡中打开新窗口，指定宽度和高度也会强制弹出窗口（如这里的答案所述）
let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')
然而，在Internet Explorer 11中，如果在浏览器首选项中选择了选项卡，则相同的代码将始终在新选项卡中打开链接，指定宽度和高度不会强制弹出新窗口。
在Chrome中，当在onclick事件中使用window.open时，它似乎会打开一个新的选项卡，当在浏览器控制台中使用它时，它会打开新的窗口（正如其他人所指出的），当指定了宽度和高度时，弹出窗口会打开。
附加阅读：window.open文档。
我将在一定程度上同意下面的人的观点（此处转述）：“对于现有网页中的链接，如果新网页与现有网页是同一网站的一部分，浏览器将始终在新选项卡中打开链接。”至少对我来说，这条“通用规则”适用于Chrome、Firefox、Opera、Internet Explorer、Safari、SeaMonkey和Konqueror。
不管怎样，有一种不那么复杂的方法可以利用对方所呈现的内容。假设我们讨论的是您自己的网站（下面的“thisite.com”），您希望在其中控制浏览器的功能，那么，下面，您希望“specialpage.htm”为空，其中完全没有HTML（这样可以节省从服务器发送数据的时间！）。
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
}
不知怎么的，一个网站可以做到这一点
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)
这可能是一个黑客，但在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”，因此它将在一个新选项卡中打开，为其提供适当的URL href，然后单击它。
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 solution
win.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;
};
你可以在形式上使用技巧：
$(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演示
这对我有效。只需阻止事件，将URL添加到＜a＞标记，然后在该标记上触发单击事件。
JavaScript
$('.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>
这个问题有答案，但不是否定的。
我找到了一个简单的解决方法：
步骤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 page
location.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
这里是一个工作示例（StackOverflow片段不允许打开新选项卡）。
是否在新选项卡或新窗口中打开URL，实际上由用户的浏览器首选项控制。无法在JavaScript中覆盖它。
window.open（）的行为取决于它的使用方式。如果它是作为用户操作的直接结果调用的，让我们假设单击一个按钮，它应该可以正常工作并打开一个新的选项卡（或窗口）：
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open a new tab
const tab = window.open('https://attacomsian.com', '_blank');
});
但是，如果您尝试从AJAX请求回调打开新选项卡，浏览器将阻止它，因为它不是直接的用户操作。
要绕过弹出窗口阻止程序并从回调中打开新选项卡，这里有一个小技巧：
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();
});
});
不要使用target=“_blank”
始终为该窗口使用一个特定的名称，在我的情况下是指fulName。在这种情况下，可以节省处理器资源：
button.addEventListener('click', () => {
window.open('https://google.com', 'meaningfulName')
})
这样，例如，当你在一个按钮上单击10次时，浏览器将始终在一个新选项卡中重新阅读它，而不是在10个不同的选项卡中打开它，这将消耗更多的资源。
您可以在MDN上阅读有关此的更多信息。
有很多答案副本建议使用“_blank”作为目标，但我发现这并不奏效。正如Prakash指出的，这取决于浏览器。但是，您可以向浏览器提出某些建议，例如窗口是否应具有位置栏。
如果你提出了足够多的“类似标签的东西”，你可能会得到一个标签，正如Nico对铬的这个更具体问题的回答：
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
免责声明：这不是万能药。这仍然取决于用户和浏览器。现在，至少您为希望窗口的外观指定了一个首选项。
下面是一个如何将其放入HTML标记的示例
<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>
推荐文章
- 什么时候JavaScript是同步的?
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
