Search code examples
javascriptgoogle-chromedom-eventsfullscreenonresize

Javascript only works in Google Chrome in debug mode


The code below works fine in Internet Explorer, but in Chrome it only works if you are in debug mode, what's wrong?

window.onresize = function (e) {
 if (window.outerWidth === screen.width && window.outerHeight == screen.height) {
    if (!fullscreen) {
        fullscreen = true;
        onfullscreenchange(true);
    }
 } else {
    if (fullscreen) {
        fullscreen = false;
        onfullscreenchange(false);
    }
  }
};


function onfullscreenchange(full) {
    alert(full);
}

Solution

  • Here is an example for listening for if the window has been fullscreened with F11. This code listens not just for resize events but also for F11 since the resize event isn't fired in Chrome when entering fullscreen mode.

    // Function to check if the window is fullscreened or not
    var isFullscreen = function(){
      return (window.outerWidth === screen.width && window.outerHeight === screen.height);
    };
    
    // Function to run when window size has changed
    var screenSizeChange = function(){
      if (isFullscreen()) {
        document.querySelector('body').innerHTML = 'You are in fullscreen mode';
      } else {
        document.querySelector('body').innerHTML = 'You are in windowed mode';
      }
    };
    
    // Run screenSizeChange when `resize` event is triggered
    window.addEventListener('resize', screenSizeChange, false);
    
    // Run screenSizeChange when F11 is pressed
    window.addEventListener('keyup', function(e){
      if (e.keyCode === 122) { // Listen for F11
        screenSizeChange();
      }
    }, false);
    

    Live version to try: http://jsbin.com/ciqeb/4/edit?js,output