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

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

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

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

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

当前回答

要打开新选项卡并保持在同一位置，可以在新选项卡中打开当前页面，然后将旧选项卡重定向到新URL。

let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL

浏览器将自动将您移动到新打开的选项卡。看起来您的页面已重新加载，您将停留在同一页面上，但在新窗口上：

2019-12-28 09:03:16

其他回答

这将创建一个虚拟的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>，其中_blank作为目标属性值，url作为href，样式显示：隐藏在a子元素中？然后添加到DOM，然后在子元素上触发单击事件。

更新

这行不通。浏览器会阻止默认行为。它可以通过编程方式触发，但不遵循默认行为。

自己检查一下：http://jsfiddle.net/4S4ET/

2014-04-11 19:27:35

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

在此页面中，打开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

这个问题有答案，但不是否定的。

我找到了一个简单的解决方法：

步骤1：创建不可见链接：

步骤2：以编程方式单击该链接：

document.getElementById（“yourId”）.click（）；

干得好！这对我很有吸引力。

2018-09-21 19:37:53

要打开新选项卡并保持在同一位置，可以在新选项卡中打开当前页面，然后将旧选项卡重定向到新URL。

let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL

浏览器将自动将您移动到新打开的选项卡。看起来您的页面已重新加载，您将停留在同一页面上，但在新窗口上：

2019-12-28 09:03:16

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

推荐文章

最新文章

标签