Javascript 使用Modernizer确定是否支持多窗口打开

我遇到的问题记录在这里。

在chrome中无法通过javascript打开多个窗口

我想打开多个窗口，如果它是受支持的，如果它不受支持，我只会返回一个链接列表

---

除了浏览器嗅探之外，还有没有一种方法可以使用Modernizer或其他工具来确定是否支持该行为？

这种功能可以在浏览器之间打开多个窗口，甚至可以通过浏览器配置打开。 所以，永远不要假设你能够打开多个弹出窗口，你可能能够，但你只能通过测试知道，测试很容易

要测试打开弹出窗口是否成功，请检查返回值

var popupWindow = window.open('http://www.google.com/');
if (!popupWindow) {
    console.log('the window did not open');
    // do other stuff
} 

如果窗口打开，返回值将是

窗口

对象。 如果窗口未打开，返回值将为falsy，此确切返回值可能因弹出窗口阻止程序而异，但通常情况下，如果窗口未打开，您可以假定该值为falsy；意思是

未定义

或

空

因此，如果窗口无法打开，很容易触发另一种方法

您不需要Modernizer或任何插件，返回窗口对象的行为在所有浏览器中都是相同的

MDN参考：

Firefox和Safari似乎默认支持打开多个窗口。然而，Chrome会屏蔽第二个窗口，并显示“弹出”屏蔽消息。

---

此外，Chrome还将阻止非直接用户操作的窗口打开；意思是单击或按键。

没有什么比Modernizer或任何自定义代码更能为您提供任何类型的功能检测。主要原因是，所有主要浏览器都需要某种用户操作来以编程方式打开新窗口，通常是单击。因此，创建特征检测是不可能的

这是一个有趣的问题，从“渐进增强”的角度思考可能会帮助您找到一个好的解决方案

首先，假设您不能在任何浏览器中打开多个窗口。你会怎么做？按照您的建议显示链接列表。通过向每个链接添加类似

target=“\u blank”

的内容，现在我们有了一个没有任何JavaScript的工作应用程序（或者如果用户禁用了JavaScript）：

现在最难的部分来了：我们怎么能一次打开多个窗口。正如我们所知，Chrome只允许每个用户点击一个窗口。虽然其他浏览器可能没有相同的限制，但他们可能会在将来添加它（实际上，我很惊讶，他们现在都没有这个限制）。因此，让我们假设所有浏览器都有与Chrome相同的限制。用户不想每次都点击每个链接，所以让我们给他们一个点击目标，他们可以快速点击打开所有窗口。创造性的措辞将减少这项任务的烦扰

<div id="rapid-click-box">
  Click me really fast and see what happens!
</div>

最后，让我们来看看那些允许同时打开多个窗口的浏览器。我们仍然需要用户点击才能调用

窗口。打开
-让我们发挥创意，看看如何让用户点击一些东西。措辞巧妙的欢迎信就足够了：

<div id="welcome-message" style="display:none">
  <h1>Hey, welcome to my site. Are you a human?</h1>
  <button>Yes</button>
</div>

<script>
// show the welcome message immediately if JS is enabled
document.getElementById('welcome-message').style.display = 'block';
</script>


嘿，欢迎来到我的网站。你是人类吗？
对
//如果启用了JS，则立即显示欢迎消息
document.getElementById（'welcome-message'）.style.display='block'；

。。。还有一点JavaScript：

var clickBox = document.getElementById('rapid-click-box');
var clickCount = 0;
clickBox.addEventListener('click', function handleRapidClick (ev) {
    var link = links[clickCount];
    if (link.style.display !== 'none') {
        openWindowFromLink(link, clickCount);
    }

    if (++clickCount === links.length) {
      clickBox.removeEventListener('click', handleRapidClick);
      clickBox.style.display = 'none';
    }
});

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function handleYesClick (ev) {
    ev.preventDefault();
    button.removeEventListener('click', handleYesClick);
    document.getElementById('welcome-message').style.display = 'none';

    for (var i = 0, l = links.length; i < l; i++) {
      if ( !openWindowFromLink(links[i], i) ) {
        break;
      }
    }

    if (i === links.length) {
      clickBox.style.display = 'none';
    }
});

var-button=document.getElementsByTagName（'button'）[0]；
按钮。addEventListener（'click'，函数HandleySclick（ev）{
ev.preventDefault（）；
按钮。removeEventListener（'click'，HandleySclick）；
document.getElementById（'welcome-message'）.style.display='none'；
对于（变量i=0，l=links.length；i

和一把小提琴来展示这一切：


<div id="welcome-message" style="display:none">
  <h1>Hey, welcome to my site. Are you a human?</h1>
  <button>Yes</button>
</div>

<script>
// show the welcome message immediately if JS is enabled
document.getElementById('welcome-message').style.display = 'block';
</script>

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function handleYesClick (ev) {
    ev.preventDefault();
    button.removeEventListener('click', handleYesClick);
    document.getElementById('welcome-message').style.display = 'none';

    for (var i = 0, l = links.length; i < l; i++) {
      if ( !openWindowFromLink(links[i], i) ) {
        break;
      }
    }

    if (i === links.length) {
      clickBox.style.display = 'none';
    }
});