我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。
我见过一些相关的问题,其中的回答大致如下:
window.open(url,'_blank');
window.open(url);
但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。
我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。
我见过一些相关的问题,其中的回答大致如下:
window.open(url,'_blank');
window.open(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调用。
其他回答
作者无法选择在新选项卡而不是新窗口中打开;这是用户偏好。(请注意,大多数浏览器中的默认用户首选项是针对新选项卡的,因此在未更改该首选项的浏览器上进行的简单测试不会证明这一点。)
CSS3提出了新的目标,但该规范被放弃。
反之则不然;通过在window.open()的第三个参数中为窗口指定某些窗口特性,当首选项是选项卡时,可以触发一个新窗口。
是否在新选项卡或新窗口中打开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上阅读有关此的更多信息。
只要省略strWindowFeatures参数,就会打开一个新选项卡,除非浏览器设置覆盖它(浏览器设置胜过JavaScript)。
新建窗口
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
新建选项卡
var myWin = window.open(strUrl, strWindowName);
--或--
var myWin = window.open(strUrl);
有很多答案副本建议使用“_blank”作为目标,但我发现这并不奏效。正如Prakash指出的,这取决于浏览器。但是,您可以向浏览器提出某些建议,例如窗口是否应具有位置栏。
如果你提出了足够多的“类似标签的东西”,你可能会得到一个标签,正如Nico对铬的这个更具体问题的回答:
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
免责声明:这不是万能药。这仍然取决于用户和浏览器。现在,至少您为希望窗口的外观指定了一个首选项。