JavaScript/HTML5 FullScreen API

Question

<div id="divbody">
    <button id="begin">Click me</button>

    <script>
        $(document).ready(function() {
            $("#begin").click(function() {
                var e = document.getElementById('divbody');
                e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            });
            document.addEventListener("webkitfullscreenchange",function(){
                if (document.webkitIsFullScreen) {
                    //alert('a');
                    document.webkitCancelFullScreen();
                }
            }, false);
        });
    </script>
</div>

The following code basically should cancel full screen as soon as it enters. However, the code above does not work (eg, it enters full screen but does not cancel back). However, by uncommenting the alert in the webkitfullscreenchange event handler, it does actually cancel.

I have hard time understanding why this is so. Also, how would I achieve what I am trying to do without using alert?

Thanks.

UPDATE

I have tried all the comments, but it does not seem to work. Any help on this would be greatly appreciated!

Answer 1

Questions like this where an alert() fixes a problem is always a matter of the sequence of events. One solution that almost always works is to put the offending code in a short timing function:

window.setTimeout(cancelFull,10);
function cancelFull() { document.webkitCancelFullScreen(); }

UPDATE Put the setTimeout() in place of your current CancelFullScreen, inside the listener.

Answer 2

尝试这个：

window.setTimeout(document.webkitCancelFullScreen, 10);