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

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

我看过相关的问题,答案看起来像这样:

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

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

答案

这是一个把戏

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/

作者无法选择在新标签页中打开,而不是在新窗口中打开。这是用户的偏爱

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

反之则不成立。通过在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 调用。

window.open无法在所有浏览器的新选项卡中可靠地打开弹出窗口

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

例如,Internet Explorer(11)用户可以选择在新窗口或新标签页中打开弹出窗口 ,而不能像Quentin 的答案中所提到的那样, 不能强制 Internet Explorer 11 用户通过 window.open 以某种方式打开弹出窗口

对于 Firefox(29)用户,使用window.open(url, '_blank') 取决于其浏览器的标签首选项,尽管您仍然可以通过指定宽度和高度来强迫他们在新窗口中打开弹出窗口(请参阅 “关于 Chrome 吗?” 部分)。

示范

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

Internet Explorer(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)中测试这些摘要,并将其选项卡首选项设置为新窗口,并查看相同的结果。

那 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事件中使用时在新选项卡中打开弹出窗口,在浏览器控制台中使用时在新窗口中打开弹出窗口( 如其他人所述 ),并打开它们在新窗口中指定宽度和高度时。

摘要

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

附加阅读

一班轮:

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

如果您使用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;
};

为了详细说明史蒂芬 · 斯皮尔伯格的答案,我在这种情况下这样做:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

这样,在浏览器跟随链接之前,我正在设置目标属性,因此它将使链接在新的选项卡或窗口中打开( 取决于用户的设置 )。

我使用以下方法,效果很好!

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

我认为您无法控制这个。如果用户已将其浏览器设置为在新窗口中打开链接,则不能强制其在新选项卡中打开链接。

JavaScript 在新窗口中打开,而不是选项卡

一个有趣的事实是,如果用户未调用操作(单击按钮或其他操作)或异步操作,则无法打开新选项卡,例如,它将不会在新选项卡中打开:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但这可能会在新选项卡中打开,具体取决于浏览器设置:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});