Chrome为cancelFullScreen和webkitCancelFullScreen返回undefined

Question

我编写了一个简单的函数来在Web应用程序上切换全屏模式.该应用程序只需要在浏览器(最终在Kiosk模式部署)中运行,但似乎与一些奇怪的行为cancelFullScreen和webkitCancelFullScreen.

例如,这里是精简toggleFullScreen功能:

var _isFullscreen = false;

function toggleFullScreen()
{
    var doc = document.documentElement,
        state = _inFullscreen,
        requestFunc = (doc.requestFullScreen || doc.webkitRequestFullScreen),
        cancelFunc = (doc.cancelFullScreen || doc.webkitCancelFullScreen);

    _inFullscreen = !(state);

    (!state) ? requestFunc.call(doc) : cancelFunc.call(doc);
}

对于一些奇怪的原因,浏览器始终报告cancelFunc是undefined,即使requestFunc工作正常.

任何人都可以解释这个的原因,以及一个可能的解决方案(不需要jQuery或类似的库插件)？

Answer 1

在@Tom Chung的帮助下,在玩完之后,事实证明cancelFullScreen(同样webkitCancelFullScreen需要被召唤document,而requestFullscreen需要被召唤document.documentElement.

因此,更新后的代码如下工作正常:

function toggleFullScreen()
{
 var doc = document.documentElement,
 state = (document.webkitIsFullScreen || document.isFullScreen),
 requestFunc = (doc.requestFullscreen || doc.webkitRequestFullScreen),
 cancelFunc = (document.cancelFullScreen || document.webkitCancelFullScreen);

 (!state) ? requestFunc.call(doc) : cancelFunc.call(document);
}