JS 實現開啟全屏和退出全屏

2021-10-08 05:03:04 字數 1745 閱讀 7038

有個非常奇怪的問題,在 macos 系統的瀏覽器,f11是顯示桌面而不是全屏。

通過選單檢視 - 進入全螢幕或快捷鍵command + ctrl + f進入全螢幕時又要調整書籤欄和工具欄。?

requestfullscreen發出非同步請求使元素進入全屏模式。注意element,是任何 dom 元素都能進入全屏模式!

而方法exitfullscreen讓當前文件退出全屏模式。注意是document,而不是呼叫requestfullscreen進入全屏模式的 dom 元素!

在呼叫requestfullscreen()之前也可監聽fullscreenchangefullscreenerror事件來處理成功或失敗。可以檢視 mdn 對 requestfullscreen、exitfullscreen 的介紹。

需要注意的是,在進入全屏後重新整理會退出全屏模式。

requestfullscreenexitfullscreen有一些相容性問題,所以還是封裝成乙個函式來呼叫。

// 是否全屏

const isfullscreen = document.fullscreen || document.webkitisfullscreen || document.mozfullscreen;

// 進入全屏

const

requestfullscreen

=(el =

null

)=>

elseif(

typeof window.activexobject !==

'undefined')'

);}}

};// 例子 1:整個網頁全屏

requestfullscreen()

;requestfullscreen

(document.

queryselector

('#video'))

;

// 退出全屏

const

exitfullscreen=(

)=>

elseif(

typeof window.activexobject !==

'undefined')'

);}}

};

我的目的是為了能在 macos 系統上按快捷鍵全屏!怎麼整了這麼多**呢!好吧,下面來個完整版的指令碼,因為我發現f11的顯示桌面還挺好用的,所以我把快捷鍵設定成了f2。?

// ==userscript==

// @name macos f2 全屏

// @namespace

// @version 0.1

// @description f2 進入全屏,f2/esc 退出全屏。

// @author haaid

// @include *

// ==/userscript==

(function()

else})

;})(

);

js實現全屏和退出全屏功能

主要是全屏和退出全屏事件,以及相應的操作 採用window.onresize監測 function 退出全屏 exitfullscreen on click function fullscreen 和exitscreen 有多種實現方式,此處只使用了其中一種 全屏 function fullscre...

全屏和退出全屏

1.新增變數 windowplacement m oldwndplacement 用來儲存原視窗位置 bool m bfullscreen 全屏顯示標誌 crect m fullscreenrect 表示全屏顯示時的視窗位置2.全屏 getwindowplacement m oldwndplacem...

全屏和退出全屏功能的實現

1.判斷狀態 瀏覽器字首 const prefixname,setprefixname usestate 瀏覽器是否支援全屏 預設支援 const isfullscreendata,setisfullscreendata usestate true 是否全屏 const isfullscreen,s...