iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 20
1
Modern Web

前端UI軍火庫系列 第 20

[Day 20]screenfull.js - 全螢幕顯示就是這麼簡單

全螢幕API(Fullscreen API)是JavaScript用來讓瀏覽器支援全螢幕的一種方式,透過Fullscreen API我們可以讓畫面可以一次呈現更多的資料,或是專注在某個影片或圖片上面等等,然後目前樓覽器的支援程度不一,因此要單純使用JavaScript的Fullscreen API,會變得複雜許多,而今天要介紹的screenfull.js,就是用來減少Fullscreen API在不同瀏覽器之間實作差異的library。

關於瀏覽器對screenfull.js的支援,可以參考Can I use...

http://ithelp.ithome.com.tw/upload/images/20161220/20020617YOQJfZz8gK.png

開始使用screenfull.js

先來看看如果不使用screenfull.js,要讓畫面全螢幕的話,程式碼大概會像這樣子

document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen;

function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}

if (document.fullscreenEnabled) {
    requestFullscreen(document.documentElement);
}

我們必須檢查目前柳覽器是否支援Fullscreen API,並針對不同瀏覽器呼叫不同的方法,而當載入screenfull.js,程式碼就簡單多了:

if (screenfull.enabled) {
    screenfull.request();
}

只需要使用screenfull.enabled檢查是否支援Fullscreen API,然後再使用screenfull.request()呼叫即可,超簡單的啦!

對某個element使用全螢幕

如果只需要針對畫面上的某個element進行全螢幕顯示的話,也很簡單,在screenfull.request()參數中加入要全螢幕顯示的目標就可以了

if (screenfull.enabled) {
  screenfull.request(document.getElementById('image'));
}

取消全螢幕顯示

基本上瀏覽器都支援直接按esc來取消全螢幕,如果希望在程式中取消,只要呼叫screenfull.exit()即可

if (screenfull.enabled) {
  screenfull.exit();
}

程式碼DEMO:https://jsfiddle.net/wellwind/w2x3gtcy/

screenfull.js還有一些其他功能如toogle和事件管理等等,也很容易使用,就自行看文件吧!

有了screenfull.js,要實現瀏覽器的全螢幕變得超簡單的呢!

文章同步發表於:https://dotblogs.com.tw/wellwind/2016/12/20/front-end-screenfull-js

不正經閒聊

20天達成!最累也最要衝刺的時候啊啊啊!!


上一篇
[Day 19]Dragula - 一步完成Drag & Drop
下一篇
[Day 21]FullCalendar - 輕鬆完成專業級行事曆
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言