screenfull在IE中引起的坑

最新推荐文章于 2023-10-27 14:17:26 发布

幻燈花

最新推荐文章于 2023-10-27 14:17:26 发布

阅读量794

点赞数

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_44478258/article/details/106792731

版权

screenfull版本

5.0.0

先来看BUG

IE环境下出现了bug

IE环境下，首页内容排版很奇怪，内容和滚动条都被拉到左边了

chrome环境下显示正常

解决方案

原来的代码是这样的

handleScreenFull(type) {
    if (!screenfull.isEnabled) {
      this.$message({
        message: "不支持全屏",
        type: "warning"
      });
      return false;
    }
    screenfull.toggle();
    this.isScreenFull = !this.isScreenFull;
}

添加判断IE的逻辑，并把全屏的元素设置为body

handleScreenFull(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "不支持全屏",
          type: "warning"
        });
        return false;
      }
      if(!!window.ActiveXObject||"ActiveXObject" in window){
        screenfull.toggle(document.getElementsByTagName("body")[0]);
      }else{
        screenfull.toggle();
      }
      this.isScreenFull = !this.isScreenFull; 
    }

问题解决

原因分析

screenfull的toggle()方法在非全屏情况下会调用request()方法来切换全屏(全屏情况下调用exit()方法)。

request: function (element) {
 		return new Promise(function (resolve, reject) {
 			var onFullScreenEntered = function () {
 				this.off('change', onFullScreenEntered);
 				resolve();
 			}.bind(this);

 			this.on('change', onFullScreenEntered);

 			element = element || document.documentElement;

 			var returnPromise = element[fn.requestFullscreen]();

 			if (returnPromise instanceof Promise) {
 				returnPromise.then(onFullScreenEntered).catch(reject);
 			}
 		}.bind(this));
 	}

没有传入element参数的时候，进行全屏的是

element = document.documentElement

相当于

document.getElementsByTagName("html")[0]

即

<html>
..........
</html>