为什么chrome在弹出窗口中退出全屏？

Question

我在我的网页中使用https://github.com/private-face/jquery.fullscreen 全屏显示。

在我的页面中，我有一个按钮，点击时会打开一个弹出窗口，在打开弹出窗口时，全屏会在 chrome 中退出，但在其他浏览器中不会。

这背后的原因可能是什么？这个问题有解决办法吗？

这个例子取自github页面，它在我的本地系统上运行，但是这里的snipet不起作用，对不起

$( document ).ready(function() {
  // check native support
  $('#support').text($.fullscreen.isNativelySupported() ? 'supports' : 'doesn\'t support');

  // open in fullscreen
  $('#fullscreen .requestfullscreen').click(function() {
    $('#fullscreen').fullscreen();
    return false;
  });

  // exit fullscreen
  $('#fullscreen .exitfullscreen').click(function() {
    $.fullscreen.exit();
    return false;
  });

  // document's event
  $(document).bind('fscreenchange', function(e, state, elem) {
    // if we currently in fullscreen mode
    if ($.fullscreen.isFullScreen()) {
      $('#fullscreen .requestfullscreen').hide();
      $('#fullscreen .exitfullscreen').show();
      $('#fullscreen .btn').show();
    } else {
      $('#fullscreen .requestfullscreen').show();
      $('#fullscreen .exitfullscreen').hide();
    }

    $('#state').text($.fullscreen.isFullScreen() ? '' : 'not');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/private-face/jquery.fullscreen/master/release/jquery.fullscreen.min.js"></script>

<div id="main">

  <div id="fullscreen" style="background-color: #fff; color: #000;">
    <h2>Example</h2>
    <p>Your browser <span id="support">doesn't support</span> FullScreen API.</p>
    <p>This block is <span id="state">not</span> in fullscreen mode. <a href="#" class="requestfullscreen">Click to open it in fullscreen</a><a href="#" class="exitfullscreen" style="display: none">Click to exit fullscreen</a>.</p>
    <button type="button" class="btn" onclick="window.open('http://stackoverflow.com/','Page','menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100');">hello</button>

  </div>
</div>

Answer 1

如果您想在全屏显示期间显示某些内容，请尝试使用modal，而不是弹出窗口。

这是一个关于弹出窗口行为的可爱的剪切和粘贴描述：
«他们说“嘿，我现在在这里。你不必现在就和我打交道，继续做你正在做的事情，但我不会离开，直到你说你不再想要我了。”» Ref.

我不知道您使用的全屏脚本的跨浏览器兼容性。
但既然你喜欢它...保持它！
并尝试使用 window.open() 以外的其他方法来显示您要在其上显示的消息。

您可以使用放置在<div id="main"> 中的模式，它可以显示“超过”您的<div id="fullscreen">... 这是我为了不“干扰”全屏显示而要做的。

在此模式打开触发器上，您可以使用 jQuery 的 $.load() 访问服务器上的另一个文件...
如果需要。