各種瀏覽器全屏模式的方法 屬性和事件介紹

2021-07-02 00:28:37 字數 1937 閱讀 6343

瀏覽器全屏模式的啟動函式requestfullscreen仍然需要附帶各瀏覽器的js方言字首,相信下面這段**需要你花大量的搜尋才能湊齊:

// 判斷各種瀏覽器,找到正確的方法

function

launchfullscreen(

element)

else

if(element.mozrequestfullscreen)

else

if(element.webkitrequestfullscreen)

else

if(element.msrequestfullscreen)

}// 啟動全屏!

launchfullscreen(

document.documentelement)

;// 整個網頁

launchfullscreen(

document.

getelementbyid(

"videoelement"))

;// 某個頁面元素

對你想要全屏顯示的頁面元素呼叫全屏方法,瀏覽器視窗就會變成全屏,但會先請求使用者允許全屏模式。要注意,使用者很有可能會拒絕全屏模式。如果使用者執行全屏模式,則瀏覽器的工具條等按鈕選單都會隱藏,你的頁面會覆蓋整個螢幕。

這個exitfullscreen方法(也需要加瀏覽器字首)會讓瀏覽器退出全屏模式,變成正常模式。

// 判斷瀏覽器種類

function

exitfullscreen(

)else

if(document.mozcancelfullscreen)

else

if(document.webkitexitfullscreen)

}// 退出全屏模式!

exitfullscreen(

);

需要注意的是,exitfullscreen只能由document物件呼叫,而不是啟動全屏時傳入的物件。

不幸的是,全屏屬性和事件的相關方法也需要新增瀏覽器字首,但我相信很快就不需要這樣做了。

fullscreenchange事件會在啟動全屏或退出全屏時觸發:

var fullscreenelement = document.fullscreenelement || document.mozfullscreenelement || document.webkitfullscreenelement;

var fullscreenenabled = document.fullscreenenabled || document.mozfullscreenenabled || document.webkitfullscreenenabled;

你仍然可以使用上面判斷瀏覽器種類的方法給這個事件加上字首。

各種瀏覽器都提供了乙個非常有用的全屏模式時的css樣式規則:

:-webkit-full-screen 

:-moz-full-screen

:-ms-fullscreen

:full-screen

:fullscreen

/* deeper elements */

:-webkit-full-screen video

/* styling the backdrop*/

::backdrop

::-ms-backdrop

有些情況下,webkit樣式會出現一些問題,你最好把這些樣式保持簡潔。

啟動全屏

退出全屏

全屏狀態屬性(控制台顯示)

這些全屏api都超級的簡單,而且超級的有用。我第一次是在mdn』s bananabread demo中看到這個api的,那是乙個**遊戲,正好需要全屏化,它使用了事件監聽來檢測全屏狀態。記住這些好用的api,需要的時候可以順手拈來。

手機瀏覽器全屏模式

關鍵在於最後的minimal ui,但這個在ios7上是支援的,在ios8上蘋果取消了,因為認為這是不友好的操作。在分享一些常用的瀏覽器 在分享一段js來控制布局的code把,我試過,針對部分瀏覽器也是有用的,不過對我的專案而言,好像整個布局會整體偏下,應該改改就可以了。function hidea...

vue中瀏覽器全屏和退出全屏

1.首先要判斷瀏覽器型別 是否ie 來控制是否展示功能,在計算屬性中判斷 computed 2.vue 3.isfullscreen變數和fullscreenload 方法控制是否全屏或者退出全屏 fullscreenload else if document.mozcancelfullscreen...

各種瀏覽器CSS hack方法

現在瀏覽器多了,做web頁面還是比較痛苦的,當然,如果你不在乎自己做的頁面在有些瀏覽器上面慘不忍睹那也是種不錯的心態 至少少了點頭痛的機會 可是你老闆或者上司或者你的使用者同意嗎?下面我就介紹我知道的hack方法吧。我現在比較常用的,並且感覺用的不動腦子的方法是 yourid yourclass h...