全屏問題

首先全屏分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
        }
    };
}