我正在尝试在新选项卡中打开URL,而不是弹出窗口。
我看过相关的问题,其中的回复看起来像:
window.open(url,'_blank');
window.open(url);
但是它们都不适合我,浏览器仍然试图打开一个弹出窗口。
我正在尝试在新选项卡中打开URL,而不是弹出窗口。
我看过相关的问题,其中的回复看起来像:
window.open(url,'_blank');
window.open(url);
但是它们都不适合我,浏览器仍然试图打开一个弹出窗口。
这是套路
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>
http://www.tutsplanet.com/open-url-new-tab-using-javascript/
作者无法选择在新选项卡中打开而不是在新窗口中打开;这是用户偏好。(请注意,大多数浏览器中的默认用户首选项是针对新选项卡的,因此在未更改该首选项的浏览器上进行的简单测试不会证明这一点。)
CSS3 提出了target-new,但该规范被放弃了。
的反向是不正确的; 通过在 的第三个参数中为窗口指定某些窗口功能window.open()
,您可以在首选选项卡时触发一个新窗口。
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 调用。
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
href: href,
}).click();
}
它创建一个虚拟的 a 元素,给它 target="_blank" 以便它在新选项卡中打开,给它正确的 url href 然后单击它。
然后你可以像这样使用它:
openInNewTab("https://google.com");
openInNewTab
(以及此页面上的任何其他解决方案)必须在所谓的“可信事件”回调期间调用 - 例如。在单击事件期间(不需要直接在回调函数中,但在单击动作期间)。否则打开新页面会被浏览器拦截
如果您在某个随机时刻(例如,在某个时间间隔内或在服务器响应之后)手动调用它 - 它可能会被浏览器阻止(这是有道理的,因为它会带来安全风险并可能导致糟糕的用户体验)
window.open
无法在所有浏览器的新标签页中可靠地打开弹出窗口不同的浏览器 window.open
以不同的方式实现行为,尤其是在用户的浏览器偏好方面。window.open
由于 Internet Explorer、Firefox 和 Chrome 处理用户浏览器首选项的方式不同,因此您不能期望在所有 Internet Explorer、Firefox 和 Chrome 中都出现相同的行为。
例如,Internet Explorer (11) 用户可以选择在新窗口或新选项卡中打开弹出窗口,您不能 window.open
像Quentin 的回答中提到的那样强制 Internet Explorer 11 用户通过某种方式打开弹出窗口。
对于 Firefox (29) 用户,使用window.open(url, '_blank')
取决于他们浏览器的选项卡首选项,但您仍然可以通过指定宽度和高度来强制他们在新窗口中打开弹出窗口(请参阅下面的“Chrome 怎么样?”部分)。
转到浏览器的设置并将其配置为在新窗口中打开弹出窗口。
设置 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) 中测试这些片段,并将其选项卡首选项设置为新窗口,并查看相同的结果。
window.open
与 Internet Explorer (11) 和 Firefox (29) 不同。我不是 100% 确定,但看起来 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 处理用户浏览器首选项的方式不同,因此您不能期望在所有 Internet Explorer、Firefox 和 Chrome 中都出现相同的行为。