知識儲備,未來可能會用到的(未完待續。。。)

頁面可以編輯

document.body.contentEditable = true 你會發現整個頁面都是可編輯的(可以用來裝逼);

全屏 API(Fullscreen API)

Element.requestFullscreen() 方法用於發出異步請求使元素進入全屏模式。
調用此 API 並不能保證元素一定能夠進入全屏模式。如果元素被允許進入全屏幕模式,document 對象會收到一個 fullscreenchange 事件,通知調用者當前元素已經進入全屏模式。如果全屏請求不被許可,則會收到一個 fullscreenerror 事件。
當進入/退出全屏模式時,會觸發 fullscreenchange 事件。你可以在監聽這個事件,做你想做的事。

fullScreenFun: function(){
    let self = this;
    var fullscreenEnabled = document.fullscreenEnabled       ||
                            document.mozFullScreenEnabled    ||
                            document.webkitFullscreenEnabled ||
                            document.msFullscreenEnabled;

    if (fullscreenEnabled) {
        let de = document.documentElement;
        if(self.fullScreenInfo === '打開全屏'){
            if( de.requestFullscreen ){
                de.requestFullscreen();
            }else if( de.mozRequestFullScreen ){
                de.mozRequestFullScreen();
            }else if( de.webkitRequestFullScreen ){
                de.webkitRequestFullScreen();
            }
            self.fullScreenInfo = '退出全屏'
        } else {
            if( document.exitFullscreen ){
                document.exitFullscreen();
            }else if( document.mozCancelFullScreen ){
                document.mozCancelFullScreen();
            }else if( document.webkitCancelFullScreen ){
                document.webkitCancelFullScreen();
            }
            self.fullScreenInfo = '打開全屏'
        }
    } else {
        self.fullScreenInfo = '瀏覽器當前不能全屏';
    }
}

相關:
document.fullscreenElement: 當前處於全屏狀態的元素 element
document.fullscreenEnabled: 標記 fullscreen 當前是否可用
document.exitFullscreen(): 退出全屏

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章