javascript - 如何通过按钮管理全屏iframe

Question

我有一个 iframe:

....
     <div style="height:500px;width:500px;background:black" class="embed-responsive">
        <iframe src="widget.html" width="100%" height="100%" class="embed-responsive-item" allowfullscreen webkitallowfullscreen mozallowfullscreen frameborder="0"></iframe>
        </div>
....

在 widget.html 中，我有一个用于打开和关闭全屏的按钮。

function closeFullScreen () {

        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }                
     }

function openFullScreen ()  {
      var iframe = parent.document.getElementsByTagName("iframe")[0];

        if (iframe.requestFullscreen) { /* Firefox */
                iframe.requestFullscreen();
            } else if (iframe.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                iframe.webkitRequestFullscreen();
            } else if (iframe.mozRequestFullScreen) { /* Firefox */
                iframe.mozRequestFullScreen();
            } else if (iframe.msRequestFullscreen) { /* IE/Edge */
                iframe.msRequestFullscreen();
            }
}

我可以打开全屏但无法关闭它？

有人可以帮助我吗？

Answer 1

来自 MDN:

The read-only fullscreenEnabled property on the Document interface indicates whether or not full-screen mode is available.

来源: MDN

本质上意味着您使用 document.fullscreenEnabled 进行的调用并不会真正检查是否存在全屏打开的事件 iFrame。相反，它询问“文档是否有可用的全屏模式？”。