延迟后在 chrome 中打开标准窗口答案

【问题标题】：Open standard window in chrome after delay延迟后在 chrome 中打开标准窗口
【发布时间】：2012-11-20 20:27:35
【问题描述】：

我正在开发一个书签，它通常在当前页面中完成所有工作，但偶尔需要打开一个新窗口（主要用于登录流程）。我大部分时间都在工作，但 chrome 正在做一些意想不到的事情。

window.open 调用在大多数浏览器中会导致标准的新窗口/选项卡，但在 chrome 中，它会在不同样式的窗口中打开。该窗口没有选项卡和只读 URL 栏。

看来，chrome 的行为基于打开发生的鼠标单击距离有多远。下面是一些演示它的简单代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Chrome window.open Test</title>
    <script>
      function startOpen() {
        var delay = Number(document.getElementById('delay').value);
        setTimeout(openWindow, delay);
      }

      function openWindow() {
        window.open('http://www.google.com', '_blank');
      }
    </script>
  </head>
  <body>
    <input type="text" id="delay" value="1000"></input>
    <input type="button" value="Open" onclick="startOpen()"></input>
  </body>
</html>

如果我将延迟保留在1000，它会正常打开。但是，如果我将其提高到 3000，它将在另一个样式窗口中打开：

在较慢的连接上，我的小书签的初始化可能需要一秒钟以上（需要加载几个库并进行凭据检查），因此我偶尔会超出此时间范围，从而导致跨浏览器和尝试的行为不一致。

有没有办法告诉 chrome 打开一个标准窗口，或者这只是我必须忍受的一些强迫行为？

【问题讨论】：

Nitpick：input 元素没有结束标签。
有趣的是，当我将计时器设置为超过 1 ec 时，它会被我的弹出窗口阻止程序阻止。这是一个fiddle 供您提问。
对，弹出窗口拦截器也发现了这一点。我允许来自我的域的弹出窗口达到这一点。我很想根本不触发它们，但它需要一些需要更多用户点击的 UX 更改，如果可能的话，我想避免这种情况。我希望书签的用户能够理解弹出窗口，尽管这一切都还悬而未决。在选择我要做什么之前，试着弄清楚我能做什么。
是的，这只是一个旁注。我个人会使用模态 iframe 等而不是打开新窗口，这样更难被阻止并且非常跨浏览器。
我实际上确实使用了模态 iframe，但出于安全原因，我们的登录页面不允许使用框架。所以如果用户没有登录，我需要触发一个新的登录窗口。

标签： javascript google-chrome popupwindow

【解决方案1】：

此解决方案仅适用于 Chrome，它通过创建锚点并模拟元素上的 Shift+Click 事件来工作：

function openLinkInWindow(url) {
    var anchor = document.createElement("a");
    anchor.href = url;
    document.body.appendChild(anchor);

    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, 

    true, // SHIFT key down

    false, 0, null);
    anchor.dispatchEvent(evt);

    anchor.parentNode.removeChild(anchor);
}

用法：

  openLinkInWindow("http://www.google.com");

工作示例：（延迟 2 秒后打开链接）

http://jsbin.com/ihuwew/1/edit

我也毫无延迟地对此进行了测试（直接在window.onload 事件中）并且它没有被弹出窗口阻止程序阻止

【讨论】：

没想过伪造事件。有没有跨浏览器的方式来做到这一点？
我在其他浏览器上尝试了相同的方法，但虽然我设法向元素发送“点击”，但我无法模拟按下 shift 键。（编辑示例以注释模拟 shift 键的位置）