Question

以下代码在Internet Explorer中运行良好，但在Chrome中，只有在处于调试模式时才有效，这有什么不对？

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

Answer 1

试试这个

var fullscreen;

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


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

Answer 2

这是一个用于监听窗口是否已使用F11进行全屏筛选的示例。此代码不仅会监听resize个事件，还会侦听F11，因为在进入全屏模式时，resize事件未在Chrome中触发。

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

实时版试用：http://jsbin.com/ciqeb/4/edit?js,output

Javascript仅适用于调试模式下的Google Chrome

2 个答案: