我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。
我见过一些相关的问题,其中的回答大致如下:
window.open(url,'_blank');
window.open(url);
但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。
我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。
我见过一些相关的问题,其中的回答大致如下:
window.open(url,'_blank');
window.open(url);
但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。
当前回答
这对我有效。只需阻止事件,将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>
其他回答
这是一个技巧,
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
如果链接位于同一域(同一网站),浏览器将始终在新选项卡中打开该链接。如果链接在其他域上,它将在新的选项卡/窗口中打开,具体取决于浏览器设置。
因此,根据这一点,我们可以使用:
<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在同一个网站上打开新窗口(它将在新选项卡中打开),然后在新窗口中打开您想要的网站。
我将在一定程度上同意下面的人的观点(此处转述):“对于现有网页中的链接,如果新网页与现有网页是同一网站的一部分,浏览器将始终在新选项卡中打开链接。”至少对我来说,这条“通用规则”适用于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
}
浏览器在处理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文档。
如果您使用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;
};