全屏问题(F11和H5全屏)

首先全屏分F11全屏：原理只是隐藏了地址栏，h5全屏：是让DOM元素全屏，例如可以让图片啦，div等，全屏后只能看到该DOM元素。

其次浏览器可能为了防止有人恶意全屏，所以全屏时监听不到F11。

解决问题思路：当一件事由两个不同的条件控制时，让一个条件去取代另一个条件。

fullscreenchange//用来监听全屏切换，但是监听不到F11，因为F11只是隐藏了地址栏

react代码：

function fullscreenchange(el, callback) {//用来监听全屏切换，但是监听不到F11，因为F11只是隐藏了地址栏
    el.addEventListener("fullscreenchange", function () {
        callback && callback(document.fullscreen);
    });
    el.addEventListener("webkitfullscreenchange", function () {
        callback && callback(document.webkitIsFullScreen);
    });
    el.addEventListener("mozfullscreenchange", function () {
        callback && callback(document.mozFullScreen);
    });
    el.addEventListener("msfullscreenchange", function () {
        callback && callback(document.msFullscreenElement);
    });
}

componentDidMount() {
    var that=this;
    // this.getCurrentPointHandler();
    this.getCurrentPoint();
    this.getDemoId();
    // this.getStayPoints()
    fullscreenchange(document, function(isFull) {
        that.setState({isFullScreen: isFull})
    });
    document.onkeydown = (event) => { //监听整个键盘的onkeydown事件
        if ( event.keyCode == 122) {
            event.preventDefault(); //阻止浏览器的默认行为
            this.handleRequestFullScreen(); //调用H5的api
        }
    };
}

handleRequestFullScreen = () => {
    const {isFullScreen} = this.state;
    const element = document.documentElement;
    if (isFullScreen) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        this.setState({isFullScreen: false})
    } else {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        this.setState({isFullScreen: true})
    }
};

vue:

mounted() {
    fullscreenchange(document, function(isFull) {
        that.isFullScreen=isFull;
    });
    document.onkeydown = (event) => { //监听整个键盘的onkeydown事件
        if ( event.keyCode == 122) {
            event.preventDefault(); //阻止浏览器的默认行为
            this.handleRequestFullScreen(); //调用H5的api
        }
    };
}