【Web】Control Browser Screenfull 控制瀏覽器全螢幕顯示

tags: Javascript Web

Common 目標

1. 利用button控制全螢幕顯示的on/off
2. 用鍵盤快捷鍵的全螢幕顯示的on/off，也必須考慮進去，button icon須隨之改變
   • Esc 可以關閉全螢幕顯示
   • F11全螢幕顯示的on/off

• 來源：https://material.io/resources/icons

Screenfull

HOW TO USE 如何實現

• Library Download
• import

<script type="text/javascript" src="path/to/screenfull.min.js"></script>

常用方法

• screenfull.isFullscreen
• 全螢幕on：screenfull.request();
• 全螢幕off：screenfull.exit();
• 全螢幕on/off：screenfull.toggle();
• 全螢幕顯示on/off狀態是否有改變：screenfull.on('change', () => {});
• 其他方法

Example 範例

• F11 和 library提供的全螢幕顯示on/off不同，故需要另外處理
• screenfull的request, exit方法不可以回server再call，會出錯
• html

<a class='dock-item' href='javascript:void(0)' id='fullscreen'>
    <img id='fullscreen_enter' src='img/fullscreen_enter.png' onclick='screenfull.request();' />
    <img id='fullscreen_exit' src='img/fullscreen_exit.png' onclick='screenfull.exit();' style='display:none' />
    <span>全螢幕</span>
</a>

• javascript

// 處理F11
document.addEventListener('keydown', function(e) {
    if(e.key == 'F11'){
        e.preventDefault();
        screenfull.toggle();
    }
});

// 改變文字, icon
screenfull.on('change', () => {
    $('#fullscreen_enter').toggle();
    $('#fullscreen_exit').toggle();
    $('#fullscreen span').text(screenfull.isFullscreen ? '離開' : '全螢幕');
});

Reference 參考資料

1. https://github.com/sindresorhus/screenfull.js/
2. [前端軍火庫]screenfull.js - 全螢幕顯示就是這麼簡單