在新选项卡（而不是新窗口）中打开URL

我试图在一个新的选项卡中打开一个URL，而不是弹出窗口。

我见过一些相关的问题，其中的回答大致如下：

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

但没有一个对我有效，浏览器仍然试图打开一个弹出窗口。

当前回答

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

2012-10-31 13:15:53

其他回答

这将创建一个虚拟的a元素，并为其提供target=“_blank”，因此它将在一个新选项卡中打开，为其提供适当的URL href，然后单击它。

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

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

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

重要说明：

这必须在所谓的“可信事件”回调过程中调用，例如，在单击事件期间（在回调函数中不需要直接调用，但在单击操作期间）。否则，浏览器将阻止打开新页面。

如果您在某个随机时刻手动调用它（例如，在一段时间内或在服务器响应之后），它可能会被浏览器阻止（这很有道理，因为这会带来安全风险，并可能导致用户体验不佳）。

2015-02-06 20:35:32

如果链接位于同一域（同一网站），浏览器将始终在新选项卡中打开该链接。如果链接在其他域上，它将在新的选项卡/窗口中打开，具体取决于浏览器设置。

因此，根据这一点，我们可以使用：

<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在同一个网站上打开新窗口（它将在新选项卡中打开），然后在新窗口中打开您想要的网站。

2013-08-12 11:58:54

如果您试图从自定义功能打开新选项卡，则这与浏览器设置无关。

在此页面中，打开JavaScript控制台并键入：

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

它会尝试打开一个弹出窗口，而不管您的设置如何，因为“点击”来自自定义操作。

为了表现得像一个链接上的实际“鼠标点击”，您需要遵循spirinvradimir的建议并真正创建它：

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

这里有一个完整的示例（不要在jsFiddle或类似的在线编辑器上尝试，因为它不会让您从那里重定向到外部页面）：

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>

<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>

<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

2013-11-22 11:46:07

这可能是一个黑客，但在Firefox中，如果您指定第三个参数“fullscreen=yes”，它会打开一个新的窗口。

例如

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

它似乎实际上覆盖了浏览器设置。

2014-09-20 01:27:36

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

2012-10-31 13:15:53

在新选项卡（而不是新窗口）中打开URL

推荐文章

最新文章

标签