0

我在我的网页中使用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>

4

1 回答 1

1

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

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

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

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

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

于 2016-05-27T06:38:11.753 回答