javascript - 为什么 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"> 中的模态框它可以显示“over”您的 <div id="fullscreen"> ...为了不“干扰”全屏显示，我会这样做。

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