Chrome returns undefined for cancelFullScreen AND webkitCancelFullScreen

fullscreen, google-chrome, javascript

Solution

With the help of @Tom Chung, and after playing around, it turns out that `cancelFullScreen` (and similarly `webkitCancelFullScreen` needs to be called on `document`, whereas `requestFullscreen` needs to be called on `document.documentElement`.

As such, the updated code as follows works fine:

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);
}

Problem

I have written a simple function to toggle Fullscreen Mode on a web application. The application is only required to run in Chrome (eventually deployed under Kiosk mode), but there seems to be some strange behaviour with `cancelFullScreen` and `webkitCancelFullScreen`. For example, here is the stripped down `toggleFullScreen` function: ``` 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); } ``` For some strange reason, Chrome always reports that `cancelFunc` is `undefined`, even though `requestFunc` works fine. Can anyone explain the reason for this, and a possible solution (without the need for jQuery or similar library plugins)?

Original source