每日技术总结：点击按钮触发浏览器全屏显示

 

今年3月换了家新公司，为了适应新环境，写每日技术总结的计划就中止了。现在在新公司两个多月，还算适应了。解决工作中的问题都不在话下。但总觉得缺少点什么。慢慢开始焦虑，迷茫，不想停留在这种安逸的状态。

总结一下最近遇到的问题和知识点

 

1.点击按钮触发浏览器全屏显示

这个功能相当于用户按下了F11

 

1.先上【全屏】按钮和【退出全屏】按钮（默认隐藏）的html代码（无关代码省略）：

            <a href="javascript:;" class="btn-full" onclick="launchFullScreen(document.documentElement)">全屏</a>
            <a href="javascript:;" class="btn-exit" onclick="exitFullscreen()" style="display: none;">退出全屏</a>

效果如下，右下角那个“全屏”：

 

2.开启全屏和退出全屏的方法js:

    //开启全屏
    function launchFullScreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    // 退出 fullscreen 
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozExitFullScreen) {
            document.mozExitFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

 

3.现在需要在全屏状态时显示“退出全屏”按钮，并隐藏“全屏”按钮。非全屏状态时反之。

通过监听“fullscreenchange”事件实现，js代码如下：

    document.addEventListener("fullscreenchange", function (event) {
        if (document.fullscreenElement) {
            $('.btn-full').hide();
            $('.btn-exit').show();
        } else {
            $('.btn-full').show();
            $('.btn-exit').hide();
        }
    });

 

4.相关知识：

（1）什么是document.documentElement?

　　返回html dom中的root 节点 即<html>

（2）Element.requestFullscreen() MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen

（3）document.exitFullscreen() MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen

（4）点击切换全屏模式，一段摘自MDN示例代码：

// 点击切换全屏模式
document.onclick = function (event) { 
  if (document.fullscreenElement) { 
    document.exitFullscreen() 
  } else { 
    document.documentElement.requestFullscreen() 
  } 
};

（5）这两个API都需要做兼容处理。示例代码如下：

function toFullVideo(){
  if(videoDom.requestFullscreen){
    return videoDom.requestFullscreen();
  }else if(videoDom.webkitRequestFullScreen){
    return videoDom.webkitRequestFullScreen();
  }else if(videoDom.mozRequestFullScreen){
    return videoDom.mozRequestFullScreen();
  }else{
    return videoDom.msRequestFullscreen();
  }
}

 

5.参考文档：

（1）MDN web docs https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen

 

posted on 2019-05-16 11:15  白小鸽  阅读(1490)  评论(1)  编辑  收藏  举报