html5+ React -进入和退出全屏实现

Posted 2022-11-28 秋天1014童话

html5已经支持全屏API，不同浏览器实现方式不一，以下为兼容方案：

一、不同浏览器的进入和退出全屏实现

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

二、全屏兼容方案

function requestFullScreen() 
     var de = document.documentElement;
     if (de.requestFullscreen) 
         de.requestFullscreen();
      else if (de.mozRequestFullScreen) 
         de.mozRequestFullScreen();
      else if (de.webkitRequestFullScreen) 
         de.webkitRequestFullScreen();
     
 

三、退出全屏兼容方案

 function exitFullscreen() 
     var de = document;
     if (de.exitFullscreen) 
         de.exitFullscreen();
      else if (de.mozCancelFullScreen) 
         de.mozCancelFullScreen();
      else if (de.webkitCancelFullScreen) 
         de.webkitCancelFullScreen();
     
 

四、检查全屏状态变化

通过监听fullscreenchange事件，不同浏览器，判断的属性不一样

//W3C下监听fullscreenchange事件，判断 document.fullscreen 属性
document.addEventListener("fullscreenchange", function () 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
, false);

//moz下监听 mozfullscreenchange 事件，判断document.mozFullScreen属性
document.addEventListener("mozfullscreenchange", function () 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
, false);

//chrome下监听webkitfullscreenchange事件，判断 document.webkitIsFullScreen 属性
document.addEventListener("webkitfullscreenchange", function () 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
, false);

五、设置全屏时样式

通过设置full-screen 伪类 给全屏设置样式，全屏时自动生效

html:-moz-full-screen 
background: red;


html:-webkit-full-screen 
background: red;


html:fullscreen 
background: red;

六、一个完整的例子–全屏按钮测试

html代码：

//全屏按钮
                <a
                  onClick=this.fullScreen
                  style= margin: "0 6px 0 6px"
                >
                  <IconFont type="icon-fullscreenalt" style= color: "rgba(0, 0, 0, 0.65)" />
                </a>

js代码：

    this.state = 
      //检测全屏状态
      isFullScreen: false
    ;

  componentDidMount()
    this.watchFullScreen();
  

  fullScreen = () => 
    console.log('fullscreen:',this.state.isFullScreen);

    if (!this.state.isFullScreen) 
      this.requestFullScreen();
     else 
      this.exitFullscreen();
    
  ;

  //进入全屏
  requestFullScreen = () => 
    console.log('requestFullScreen')
    var de = document.documentElement;
    if (de.requestFullscreen) 
      de.requestFullscreen();
     else if (de.mozRequestFullScreen) 
      de.mozRequestFullScreen();
     else if (de.webkitRequestFullScreen) 
      de.webkitRequestFullScreen();
    
  ;
  //退出全屏
  exitFullscreen = () => 
    console.log('exitFullscreen')
    var de = document;
    if (de.exitFullscreen) 
      de.exitFullscreen();
     else if (de.mozCancelFullScreen) 
      de.mozCancelFullScreen();
     else if (de.webkitCancelFullScreen) 
      de.webkitCancelFullScreen();
    
  ;

  //监听fullscreenchange事件
  watchFullScreen = () => 
    const _self = this;
    document.addEventListener(
      "fullscreenchange",
      function() 
        _self.setState(
          isFullScreen: document.fullscreen
        );
      ,
      false
    );

    document.addEventListener(
      "mozfullscreenchange",
      function() 
        _self.setState(
          isFullScreen: document.mozFullScreen
        );
      ,
      false
    );

    document.addEventListener(
      "webkitfullscreenchange",
      function() 
        _self.setState(
          isFullScreen: document.webkitIsFullScreen
        );
      ,
      false
    );
  ;

七、注意事项

1. 全屏效果javascript实现
2. 全屏效果click, mousedwon, mouseup事件才能触发.

这点要特别注意。若直接调用全屏代码，会报fullScreen. Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. 的警告。
参考链接：https://stackoverflow.com/questions/32642865/failed-to-execute-requestfullscreen-on-element-api-can-only-be-initiated-by
解释：全屏效果一般要在用户交互场景下才能触发。若用户进入一个网站时，没有任何操作就显示全屏，用户会很困惑这样的行为。

1. 全屏方法为：全屏元素.requestFullScreen(); 目前不同的浏览器需要不同的前缀，如mozRequestFullScreen或webkitRequestFullScreen
2. 取消全屏为：全屏元素.cancelFullScreen(); 同样，不同浏览器需要添加私有前缀，如mozCancelFullScreen或webkitCancelFullScreen
3. 可以通过document.fullScreen判断浏览器是否处于全屏状态。注意：FireFox和Chrome写法上有不同，Webkit内核浏览器需要增加个is, 如document.webkitIsFullScreen; 而Firefox则是document.mozFullScreen.
4. :full-screen用在CSS代码中，可以控制全屏元素（及其子元素）全屏状态时的样式。同样，不同浏览器不同前缀。如:-moz-full-screen或:- webkit-full-screen.
5. 一个页面如果有多个全屏元素，在CSS控制的时候，可以使用类似#element:full-screen的选择器分别控制。

八、改进版本

既是方法执行（如果是方法），又是属性判断（是否支持属性）：

<button onClick="runPrefixMethod(document.documentElement, 'RequestFullscreen')">点击全屏</button>

<script>
    function runPrefixMethod(element, method) 
        var usablePrefixMethod;
        ["webkit", "moz", "ms", "o", ""].forEach(function (prefix) 
            if (usablePrefixMethod) return;
            if (prefix === "") 
                // 无前缀，方法首字母小写
                method = method.slice(0, 1).toLowerCase() + method.slice(1);
            
            var typePrefixMethod = typeof element[prefix + method];

            if (typePrefixMethod + "" !== "undefined") 
                if (typePrefixMethod === "function") 
                    usablePrefixMethod = element[prefix + method]();
                 else 
                    usablePrefixMethod = element[prefix + method];
                
            
        );
        return usablePrefixMethod;
    ;

注：Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。