有時在一些網站看到可以將特定的內容進行全螢幕的檢視, 早期僅有 video 可以有這樣的功能, 現在也可以透過瀏覽器擴充方法來進行特定內容的全螢幕檢視.
程式碼如下:
function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }
其中 launchFullscreen 傳入指定的容器物件, 如 div 就可以利用擴充方法 requestFullscreen 來進行全螢幕檢視, 而 exitFullscreen 則不用傳入物件, 使用 document 的擴充方法 exitFullscreen 即可離開全螢幕檢視.
範例:
http://sample.diary.tw/40/index.htm
參考資料:
http://xuhong.github.io/2014/05/23/fullscreen/
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/device/fullscreen-api/
[2020/09/02 17:41]
由於 requestFullscreen() 是只針對特定 element , 所以在轉換網址時, 會恢復沒有全螢幕的狀況, 若是希望能持續有全螢幕效果, 可以使用 iframe 方式進行, 可以參考範例: https://codepen.io/timhuang/pen/KKzXWKa