使用JavaScript在新选项卡(而不是新窗口)中打开URL
Mar*_*ark 1941 javascript
我试图在新选项卡中打开一个URL,而不是弹出窗口.我已经看到相关的问题,其中的回答看起来像:
window.open(url,'_blank');
window.open(url);
但是它们都没有为我工作,浏览器仍然试图打开一个弹出窗口.
Rin*_*rge 1604
这是一招,
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
在大多数情况下,这应该直接在onclick链接的处理程序中发生,以防止弹出窗口阻止程序和默认的"新窗口"行为.您可以这样做,或者通过向DOM对象添加事件侦听器.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
http://www.tutsplanet.com/open-url-new-tab-using-javascript/
- 不行.在地址栏右侧收到消息:**弹出窗口被阻止**.然后我允许弹出窗口.而且,它在弹出窗口打开,而不是**标签**!OS X Lion上的Chrome 22.0.1229.94. (114认同)
- @ b1naryatr0phy那是因为你没有真正测试它.更改浏览器中的设置.是否在选项卡或窗口中打开是由浏览器的设置决定的.通过调用window.open(或任何Javascript)来选择如何打开新窗口/选项卡,您无能为力. (38认同)
- @hydRANger MDN 上的相同 [window.open()](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) 链接：在每次调用 `window 时打开一个新窗口.open()`，使用特殊值“_blank”作为“windowName”。 (5认同)
- 不在这里工作,铬版本22.0.1229.94米 (3认同)
- var win = window.open（url，'_blank'）; 对于[window.open（）]（https://developer.mozilla.org/en-US/docs/Web/API/Window/open），不需要“ _blank”，第二个参数是strWindowName ：新窗口的字符串名称。该名称可以使用<a>或<form>元素的target属性用作链接和表单的目标。该名称不应包含任何空格字符。请注意，strWindowName不指定新窗口的标题。 (2认同)
Que*_*tin 851
作者无法做的任何事情都可以选择在新选项卡中打开而不是在新窗口中打开.这是用户偏好.
CSS3提出了target-new,但规范被放弃了.
的反向是不正确的; 通过在第三个参数中指定窗口的尺寸window.open(),可以在首选项用于选项卡时触发新窗口.
- 浪费别人的时间而不是告诉他们某件事的两件事是无法做到的.(1)告诉他们一些无法做到的事情*可以*完成.(2)保持沉默,让他们一直在寻找一种无法做到的事情的方法. (221认同)
- @AliHaideri Javascript与新标签/窗口的打开方式无关.这完全取决于您的浏览器设置.使用`window.open`告诉浏览器打开新内容,然后浏览器打开在其设置中选择的内容 - 选项卡或窗口.在您测试过的浏览器中,将设置更改为在新窗口而不是选项卡中打开,您将看到其他人的解决方案是错误的. (41认同)
- @Neel - 因为它简明扼要地谈到了许多人想要了解的话题. (9认同)
- @Cupcake - 文档通常不打算描述不存在的功能.https://www.evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/83375030b6645bf8e7ddbc19c531b794 (8认同)
- 作者可以做事(主要是编写不同的代码).这些东西都不会触发标签而不是窗口. (4认同)
- 为什么这是接受的答案？我已经测试了duke和arikfr的以下给出的答案,他们在FF,Chrome和Opera中工作得非常好,除了IE(它不起作用)和Safari(它在新窗口中打开而不是新标签). (3认同)
- @chev打开标签而不是窗口很简单.你不能用javascript做到这一点,因为标签和窗口之间的区别不是javascript所关心的.*这不是语言的问题.*即使在另一个十年内它也不会"固定":它是故意的.用户可以选择是否在新选项卡或窗口中打开链接 - 而不是您. (3认同)
- @Bondye - 问题是询问新**标签**而不是新窗口.你得到新的**窗口**的事实是重点. (2认同)
Ven*_*tra 360
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选项set 进行Ajax调用.
- 将这一个标记为正确的答案会很高兴.我使用Chrome v26(Windows)进行的测试确认,如果代码位于按钮的单击处理程序中,则会打开一个新选项卡,如果以编程方式调用代码,例如从控制台调用,则会打开一个新窗口. (27认同)
- @Ian从我在具有默认设置的浏览器上进行的测试,这个答案适用于上面的答案没有的情况.只有当用户更改了默认设置时,接受的答案才会显示"您无能为力". (2认同)
小智 244
window.open 无法在所有浏览器的新选项卡中可靠地打开弹出窗口
不同的浏览器 window.open 以不同的方式实现行为,尤其是关于用户的浏览器偏好.您不能指望window.open在所有Internet Explorer,Firefox和Chrome中都存在相同的行为,因为它们处理用户的浏览器首选项的方式不同.
例如,Internet Explorer(11)用户可以选择在新窗口或新选项卡中打开弹出窗口,您无法强制Internet Explorer 11用户以某种方式打开弹出窗口 window.open,如Quentin的答案所暗示的那样.
至于Firefox(29)用户,使用window.open(url, '_blank') 取决于他们的浏览器选项卡首选项,但您仍然可以强制他们通过指定宽度和高度在新窗口中打开弹出窗口(请参阅下面的"关于Chrome的内容？"部分).
示范
转到浏览器的设置并将其配置为在新窗口中打开弹出窗口.
Internet Explorer(11)
测试页面
如上所示,在设置Internet Explorer(11)以在新窗口中打开弹出窗口后,使用以下测试页面进行测试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>
观察弹出窗口是在新窗口中打开的,而不是新选项卡.
您还可以在Firefox(29)中测试上面的片段,并将其选项卡首选项设置为新窗口,并查看相同的结果.
Chrome怎么样？它window.open从Internet Explorer(11)和Firefox(29)实现不同.
我不是百分百肯定,但看起来Chrome(版本34.0.1847.131 m)似乎没有任何设置可供用户选择是否在新窗口或新标签中打开弹出窗口(如Firefox和Internet Explorer)有).我检查了Chrome文档以管理弹出窗口,但它没有提及任何有关此类事情的内容.
此外,不同的浏览器似乎再次实现 window.open 不同的行为.在Chrome和Firefox中,指定宽度和高度将强制弹出窗口,即使用户已将Firefox(29)设置为在新选项卡中打开新窗口(如在新窗口中打开JavaScript的答案中所述,而不是制表符) :
<!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>
但是,如果用户将标签设置为浏览器首选项,则上面的相同代码段将始终在Internet Explorer 11中打开新标签,即使指定宽度和高度也不会强制为其弹出新窗口.
因此window.open,Chrome中的行为似乎是在onclick事件中使用时在新选项卡中打开弹出窗口,从浏览器控制台使用时在新窗口中打开它们(如其他人所述),并在新窗口中打开它们以宽度和高度指定.
摘要
不同的浏览器 window.open 针对用户的浏览器偏好实现不同的行为.您不能指望window.open在所有Internet Explorer,Firefox和Chrome中都存在相同的行为,因为它们处理用户的浏览器首选项的方式不同.
补充阅读
- 你没有回答这个问题,你刚才证明window.open是不一致的. (10认同)
pie*_*e6k 214
一个班轮:
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
它创建一个虚拟a元素,然后target="_blank"在新标签页中打开它,使其正确url href,然后单击它.
如果你愿意,基于此你可以创建一些功能:
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
href,
}).click();
}
然后你可以使用它像:
openInNewTab("http://google.com");
- 谢谢.你的纯JS有一个缺失的部分 - 正如Luke Alderton所写的那样(见下文),你需要将创建的元素附加到文档正文,在你的代码中它至少在Firefox 37中悬空,它不会做任何事情. (8认同)
- @shaedrich受到你的剪辑的启发我添加了非jquery单行:`Object.assign(document.createElement('a'),{target:'_ _ glank',href:'URL_HERE'}).click();` (5认同)
- @mcginniwa这样的任何动作 - 如果没有像鼠标点击这样的用户动作触发,将会弹出popup-blocker.想象一下,您可以在没有用户操作的情况下使用Javascript打开任何URL - 这将非常危险.如果你把这个代码放在像click函数这样的事件中 - 它会正常工作 - 这与所有提出的解决方案相同. (4认同)
- 您可以按如下方式简化代码:`$('<a />',{'href':url,'target','_ blank'}).get(0).click();` (4认同)
Moh*_*eer 79
如果您使用window.open(url, '_blank'),它将在Chrome上被阻止(弹出窗口拦截器).
试试这个:
//With JQuery
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
ari*_*kfr 60
为了详细说明斯蒂芬斯皮尔伯格的答案,我在这种情况下这样做了:
$('a').click(function() {
$(this).attr('target', '_blank');
});
这样,就在浏览器将跟随我设置目标属性的链接之前,所以它将在新的选项卡或窗口中打开链接(取决于用户的设置).
小智 33
我使用以下,它运作良好!
window.open(url, '_blank').focus();
- 这可能会在新选项卡或窗口中打开，具体取决于浏览器设置。问题特别是关于在新选项卡中打开，即使首选项是针对新窗口的。 (4认同)
kar*_*una 18
一个有趣的事实是,如果用户未调用操作(单击按钮或某物)或者它是异步的,则无法打开新选项卡,例如,这不会在新选项卡中打开:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
但这可能会在新选项卡中打开,具体取决于浏览器设置:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});
- 这在Firefox 28,Chrome 34b和Safari 7.0.2中作为弹出窗口被阻止,所有库存设置.:( (2认同)
Man*_*nyC 12
只是省略[strWindowFeatures]参数将打开一个新选项卡,除非浏览器设置覆盖(浏览器设置胜过JavaScript).
新窗户
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
新标签
var myWin = window.open(strUrl, strWindowName);
- 要么 -
var myWin = window.open(strUrl);
att*_*ian 11
是否在新标签页或新窗口中打开 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();
});
});
spi*_*mir 10
(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')))
Cod*_*nja 10
你可以用一个技巧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`为键&`value`作为查询参数内所有参数的值.然后提交表单 (4认同)
Pre*_*vic 10
不要使用目标=“_blank”
在我的例子中，始终为该窗口使用特定的名称meaningfulName。在这种情况下，您可以节省处理器资源：
button.addEventListener('click', () => {
window.open('https://google.com', 'meaningfulName')
})
这样，例如，当您单击某个按钮 10 次时，浏览器将始终在一个新选项卡中重新呈现它，而不是在 10 个不同的选项卡中打开它，这会消耗更多资源。
您可以在MDN上阅读更多相关内容。
如果您尝试从自定义功能打开新选项卡,这与浏览器设置无关.
在此页面中,打开JavaScript控制台并键入:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
并且无论您的设置如何,它都会尝试打开弹出窗口,因为"点击"来自自定义操作.
为了表现得像链接上的实际"鼠标点击",你需要遵循@spirinvladimir的建议并真正创建它:
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>
- @FahadAbidJanjua绝对不是*正确的.**它仍然取决于浏览器设置.**HTML或Javascript规范中没有任何内容声明必须在弹出窗口而不是选项卡中打开"自定义操作".实际上,**当前机器上的**浏览器都没有显示此行为. (11认同)
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
浏览器将自动将您移至新打开的选项卡。看起来您的页面已重新加载，并且您将停留在同一页面上，但在一个新窗口上：
| 归档时间： |
|
| 查看次数： |
2402930 次 |
| 最近记录： |