Question

我有一个带有iframe的页面（其中包括一个SCORM模块）。在该页面上，我添加了一个按钮，可使用以下javascript代码全屏显示iframe。进入全屏模式时，该按钮消失。

<button id="fullscreen">
    Button
</button>

<script type="text/javascript">
  document.getElementById("fullscreen").addEventListener("click", function () {
      if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen();
      }
  });

  document.addEventListener("fullscreenchange", function (event) {
        displayButton();
  });

  function displayButton() {
      if (document.fullscreenElement) {
          document.getElementById("fullscreen").style.display="none";
      } else {
          document.getElementById("fullscreen").style.display="block";
      }
  }
</script>

问题在于，在特定情况下，当您关闭全屏显示时，该按钮不会重新出现。这种情况如下：iframe还包含嵌入式Vimeo视频。

您按下了全屏按钮。然后，您将iframe全屏显示，并且该按钮被隐藏了。
在全屏模式下，您按了嵌入式Vimeo电影的全屏按钮。然后，您将获得全屏的Vimeo电影。
在全屏显示Vimeo电影时，您按下Escape或F11（Windows pc）以退出全屏。然后退出全屏。问题：但是按钮没有重新出现。（如果您在第1步后退出全屏，则按钮会重新出现。）

退出全屏时，以及从Vimeo电影退出全屏时，如何更改代码以再次显示按钮？

切换按钮，无论退出全屏模式如何

0 个答案: