在新的标签页中打开一个URL(而不是新的窗口)。

javascript


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

我看过相关的问题,回答会是这样的。

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

但对我来说都不奏效,浏览器还是试图打开一个弹窗。




Answer 1 Quentin


作者无法选择在新标签页中打开,而不是在新窗口中打开。这是用户的喜好。(请注意,大多数浏览器中的默认用户首选项用于新选项卡,因此在未更改首选项的浏览器中进行的琐碎测试不会证明这一点。)

CSS3提出了新的目标,但是该规范被放弃了

反向是不正确的; 通过在 window.open() 的第三个参数中指定窗口的尺寸,可以在选项卡的首选项触发新窗口。




Answer 2 Rinto George


这是一个技巧。

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/




Answer 3 Venkat Kotra


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




Answer 4 Peter Mortensen


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吗?”部分)。

Demonstration

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

互联网浏览器(11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

测试页

如上所述,将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)不同。

我不确定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中打开一个新选项卡,即使不指定宽度和高度也将为其强制弹出新窗口。

因此,Chrome 中 window.open 的行为似乎是在 onclick 事件中使用时在新选项卡中打开弹出窗口,在浏览器控制台中使用时在新窗口中打开弹出窗口(如其他人所述),并打开它们在新窗口中指定宽度和高度时。

Summary

不同的浏览器根据用户的浏览器首选项实现 window.open 的行为不同。您不能期望 window.open 在所有Internet Explorer,Firefox和Chrome上都具有相同的行为,因为它们处理用户浏览器首选项的方式不同。

补充阅读




Answer 5 pie6k


一条线。

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("https://google.com"); 

重要说明:

openInNewTab 在用户操作回调期间必须调用openInNewTab(以及此页面上的任何其他解决方案)-例如。内部点击事件(直接在回调函数中不是必需的,而是在点击操作期间)。

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