html5 实现的全屏模式下的问题与解决

1.实现->点击button实现全屏模式

    // 进入全屏
    enterFullScreen() {
        let de: any;
        de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        }

    }

问题：Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

即这个方法只能由浏览器点击button事件来实现，

不能用js

      $('#xxx').on('click', function () {

        that.enterFullScreen(); 
      });

      $(#id).click(); // 无效

 

 

2.退出全屏->点击button事件

问题下面方法不能实现退出全屏

    // 退出全屏 -浏览器点击事件无效
    exitFullScreen() {
        let de: any;
        de = document.documentElement;
        if (de.exitFullscreen) {
            de.exitFullscreen();
            console.log('12');
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
            console.log('13');
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
            console.log('14');
        }
        console.log('15');

    }

3.监听键盘按下Esc事件

问题：在全屏模式下，浏览器无法监听Esc事件

及以下方法都不能监听：

    // 无效
    $(window).keydown(function(event) {
      if (event.keyCode === 27) {
        console.log('你按下了Esc');
      }
    });

    // 无效
    $(document).keydown(function(event) {
      if (event.keyCode === 27) {
        console.log('你按下了Esc');
      }
    });

解决：

  ngOnInit() {
    const that = this;
    window.onresize = function () {
      if (!that.checkFull()) {
        // 要执行的动作
        console.log('你按下了Esc');
      }
    };

  }

  checkFull() {
    let isFull: any;
    isFull = document.fullscreenEnabled || document.webkitIsFullScreen;
    if (isFull === undefined) {
      isFull = false;
    }
    return isFull;
  }

文档收集：

https://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

https://blog.csdn.net/m0_37885651/article/details/79231670