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：

“文档”界面上的只读fullscreenEnabled属性指示全屏模式是否可用。

来源： MDN

从本质上讲，您与document.fullscreenEnabled进行的通话实际上并不会真正检查是否存在一个全屏打开的活动iFrame。而是在询问“文档是否具有全屏模式？”。

如何通过按钮管理全屏iframe-已解决

1 个答案: