IE与Edge浏览器中两段图片缩放代码执行异常问题求助

嘿，这个问题我之前也碰到过！IE和Edge对全屏API的处理逻辑确实和Chrome、Firefox不太一样——它们在执行全屏代码后，浏览器的全屏状态可能还没来得及更新，或者点击事件在全屏切换过程中被重复触发了，导致你的缩小代码立刻就跟着执行了。给你两个靠谱的解决方案：

方案一：自定义状态变量跟踪全屏状态 #

我们自己维护一个变量来记录当前图片是否处于全屏状态，不用直接依赖浏览器的全屏检测API，这样能避开浏览器状态更新的延迟问题。示例代码如下：

// 初始化状态变量，标记是否处于全屏
let isImgFullscreen = false;
const targetImage = document.getElementById('your-image-id'); // 替换成你的图片ID

targetImage.addEventListener('click', function() {
  if (!isImgFullscreen) {
    // 执行全屏放大逻辑，兼容各浏览器
    if (targetImage.requestFullscreen) {
      targetImage.requestFullscreen();
    } else if (targetImage.mozRequestFullScreen) { // Firefox
      targetImage.mozRequestFullScreen();
    } else if (targetImage.webkitRequestFullscreen) { // Chrome/Safari
      targetImage.webkitRequestFullscreen();
    } else if (targetImage.msRequestFullscreen) { // IE/Edge
      targetImage.msRequestFullscreen();
    }
    isImgFullscreen = true;
  } else {
    // 执行退出全屏缩小逻辑，兼容各浏览器
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    isImgFullscreen = false;
  }
});

方案二：监听全屏切换事件同步状态 #

另一种更稳妥的方式是监听浏览器原生的全屏切换事件，实时同步我们的状态变量，确保状态和实际全屏情况完全一致：

let isImgFullscreen = false;
const targetImage = document.getElementById('your-image-id'); // 替换成你的图片ID

// 点击事件只负责触发全屏/退出全屏操作
targetImage.addEventListener('click', function() {
  if (!isImgFullscreen) {
    // 触发全屏
    if (targetImage.requestFullscreen) {
      targetImage.requestFullscreen();
    } else if (targetImage.mozRequestFullScreen) {
      targetImage.mozRequestFullScreen();
    } else if (targetImage.webkitRequestFullscreen) {
      targetImage.webkitRequestFullscreen();
    } else if (targetImage.msRequestFullscreen) {
      targetImage.msRequestFullscreen();
    }
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
});

// 监听各浏览器的全屏状态变化事件，更新状态变量
document.addEventListener('fullscreenchange', updateFullscreenStatus);
document.addEventListener('mozfullscreenchange', updateFullscreenStatus);
document.addEventListener('webkitfullscreenchange', updateFullscreenStatus);
document.addEventListener('MSFullscreenChange', updateFullscreenStatus);

function updateFullscreenStatus() {
  // 根据浏览器API判断当前是否处于全屏，同步状态变量
  isImgFullscreen = !!(
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

这两个方案都能解决IE/Edge的问题：方案一通过自定义状态避开了浏览器API的延迟，方案二则通过监听原生事件确保状态完全同步，你可以根据自己的代码场景选择合适的方式。

内容的提问来源于stack exchange，提问作者Don Pincott