在新选项卡(而不是新窗口)中打开 URL

IT技术 javascript tabs href
2020-12-18 00:10:16

我正在尝试在新选项卡中打开URL,而不是弹出窗口。

我看过相关的问题,其中的回复看起来像:

window.open(url,'_blank');
window.open(url);

但是它们都不适合我,浏览器仍然试图打开一个弹出窗口。

6个回答

这是套路

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/

var win = window.open(url, '_blank'); '_blank' 不是必需的,对于window.open(),第二个参数是 strWindowName,用于:新窗口的字符串名称。该名称可以用作使用 <a> 或 <form> 元素的 target 属性的链接和表单的目标。该名称不应包含任何空格字符。请注意, strWindowName 不指定新窗口的标题。
2021-02-07 00:10:16
不起作用。在地址栏右侧收到一条消息:弹出窗口被阻止然后我允许弹出窗口。瞧,它在弹出窗口中打开,而不是选项卡OS X Lion 上的 Chrome 22.0.1229.94。
2021-02-12 00:10:16
@hydRAnger相同window.open()的MDN链接:要打开一个上的每一个呼叫窗口window.open(),使用特殊value_blankwindowName
2021-02-12 00:10:16
如果需要更改浏览器设置,请避免它!
2021-02-14 00:10:16
@b1naryatr0phy 那是因为您实际上没有正确测试它。更改浏览器中的设置。它是在选项卡中还是在窗口中打开取决于您的浏览器设置。通过调用 window.open(或任何 Javascript)来选择如何打开新窗口/选项卡,您无能为力。
2021-03-02 00:10:16

作者无法选择在新选项卡中打开而不是在新窗口中打开;这是用户偏好(请注意,大多数浏览器中的默认用户首选项是针对新选项卡的,因此在未更改该首选项的浏览器上进行的简单测试不会证明这一点。)

CSS3 提出了target-new,但该规范被放弃了

反向是不正确的; 通过在 的第三个参数中为窗口指定某些窗口功能window.open(),您可以在首选选项卡时触发一个新窗口。

@Luke:如果是如何仅在您自己的浏览器中获得此功能的问题,则可能是 SuperUsers 站点的问题。
2021-02-21 00:10:16
为什么这是公认的答案?我已经测试了以下 duke 和 arikfr 给出的答案,它们在 FF、Chrome 和 Opera 中运行得非常好,除了 IE(它不起作用)和 Safari(它在新窗口而不是新标签中打开)。
2021-02-24 00:10:16
@Bondye — 问题是询问新选项卡而不是新窗口。您获得新窗口的事实更重要。
2021-02-25 00:10:16
@AliHaideri Javascript 与新选项卡/窗口的打开方式无关。这一切都取决于您的浏览器设置。Usingwindow.open告诉浏览器打开一些新的东西,然后浏览器打开在其设置中选择的内容 - 选项卡或窗口。在您测试的浏览器中,将设置更改为在新窗口而不是选项卡中打开,您会看到其他人的解决方案是错误的。
2021-02-27 00:10:16
有两件事比告诉别人无法完成的事情更浪费其他人的时间。(1) 告诉他们不能做的事可以做。(2) 保持沉默,让他们不断寻找做不到的事情的方法。
2021-03-06 00:10:16

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 调用

@Ian 根据我对具有默认设置的浏览器的测试,此答案适用于上述答案不适用的情况。仅当用户更改了默认设置时,接受的答案是“您无能为力”。
2021-02-13 00:10:16
@Ian 为了清楚起见,我在关于用户设置的回答警告中提到了这一点。“如果用户在浏览器中有适当的设置,这将起作用。” 我认为大多数用户不会更改浏览器设置,这个答案适用于大多数用户。
2021-02-15 00:10:16
async: false在 Chrome 中不起作用。要从回调打开一个新窗口,您需要在发送 HTTP 请求之前先打开一个空窗口,然后再更新它。这是一个很好的技巧
2021-02-17 00:10:16
将此标记为正确答案会很好。我对 Chrome v26 (Windows) 的测试确认,如果代码在按钮的单击处理程序中,它会打开一个新选项卡,如果以编程方式调用代码(例如从控制台),则它会打开一个新窗口。
2021-02-28 00:10:16
function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href: href,
  }).click();
}

它创建一个虚拟的 a 元素,给它 target="_blank" 以便它在新选项卡中打开,给它正确的 url href 然后单击它。

然后你可以像这样使用它:

openInNewTab("https://google.com"); 

重要的提示:

openInNewTab(以及此页面上的任何其他解决方案)必须在所谓的“可信事件”回调期间调用 - 例如。单击事件期间(不需要直接在回调函数中,但在单击动作期间)。否则打开新页面会被浏览器拦截

如果您在某个随机时刻(例如,在某个时间间隔内或在服务器响应之后)手动调用它 - 它可能会被浏览器阻止(这是有道理的,因为它会带来安全风险并可能导致糟糕的用户体验)

谢谢你。你的纯 JS 有一个缺失的部分——正如 Luke Alderton 所写(见下文),你需要将创建的元素附加到文档正文中,在你的代码中它挂在空白中,至少在 Firefox 37 中它不做任何事情.
2021-02-15 00:10:16
@shaedrich-如何在您提供的代码中包含一个文本,该文本将包含到页面的链接(指定 bu url)?
2021-02-27 00:10:16
@shaedrich 受您剪下的启发,我添加了非 jquery 单行: Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
2021-03-05 00:10:16
您可以按如下方式简化代码: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
2021-03-07 00:10:16
@mcginniwa 任何这样的操作 - 如果不是由用户操作(如鼠标单击)触发,将变成弹出窗口阻止程序。想象一下,您可以在没有用户操作的情况下使用 Javascript 打开任何 url - 这将是非常危险的。如果您将此代码放在事件中,例如单击函数 - 它会正常工作 - 它与此处所有建议的解决方案相同。
2021-03-09 00:10:16

window.open 无法在所有浏览器的新标签页中可靠地打开弹出窗口

不同的浏览器 window.open 以不同的方式实现行为,尤其是在用户的浏览器偏好方面。window.open由于 Internet Explorer、Firefox 和 Chrome 处理用户浏览器首选项的方式不同,因此您不能期望在所有 Internet Explorer、Firefox 和 Chrome 中都出现相同的行为

例如,Internet Explorer (11) 用户可以选择在新窗口或新选项卡中打开弹出窗口,您不能 window.openQuentin 的回答中提到的那样强制 Internet Explorer 11 用户通过某种方式打开弹出窗口

对于 Firefox (29) 用户,使用window.open(url, '_blank') 取决于他们浏览器的选项卡首选项,但您仍然可以通过指定宽度和高度来强制他们在新窗口中打开弹出窗口(请参阅下面的“Chrome 怎么样?”部分)。

示范

转到浏览器的设置并将其配置为在新窗口中打开弹出窗口。

浏览器 (11)

Internet Explorer 设置对话框 1

Internet Explorer 选项卡设置对话框

测试页

设置 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 中都出现相同的行为

补充阅读

你没有回答问题,你只是证明window.open不一致。
2021-02-07 00:10:16
请提供一个解决方案,这个“答案”乞求一个解决方案
2021-03-03 00:10:16