Fullscreen API 全屏顯示網頁

2021-07-31 22:05:57 字數 4074 閱讀 9635

第一次看到應用 fullscreen api 全屏顯示網頁,是 facebook 中的**放大。作為乙個比較新的 api,目前只有 safari、chrome 和 firefox 三種瀏覽器支援該特性。因為尚未發布正式版的標準,所以必須使用瀏覽器特定的方法,也就是應用新增字首(webit/moz)的方法。

要對某個元素使用全屏特效,標準的流程是:

呼叫這個元素物件的requestfullscreen()方法;

瀏覽器將元素全屏顯示,改變相關的屬性值,然後觸發 document 的fullscreenchange事件;

退出全屏時有兩種方式,一種是預設的按esc鍵退出,一種是呼叫 document 的exitfullscreen()方法;

瀏覽器將元素退出全屏顯示,改變相關屬性值,再次觸發fullscreenchange方法。

瀏覽器在改變全屏狀態時修改的相關屬性,是指修改當前全屏狀態有否、全屏顯示的元素物件,這些屬性都是唯讀的。

瀏覽器觸發fullscreenchange事件,預設不做任何處理,內部的處理函式需要程式設計人員自行判斷當前全屏狀態後,進行相應處理。

對應的,規範中還新增了乙個:fullscreen偽類,對當前全屏的元素進行樣式定義。

fullscreen 目前只有兩個方法:進入全屏、退出全屏,三個屬性(全部是唯讀的):是否支援全屏、當前全屏狀態、當前全屏元素,以及乙個在全屏狀態改變時觸發的事件( using full-screen mode 中提到還有乙個fullscreenerror,但是我沒有測試出如何才能觸發這個事件 )。與 w3 草案 相比,firefox 的實現更符合標準,而 webkit 核心瀏覽器中的方法則要自我很多。

所有的方法和屬性中,只有requestfullscreen()是 element 物件的方法,其他全部是 document 物件所有的方法和屬性。

將 element 全屏顯示。webkit核心瀏覽器和firefox表現不同,前者只要求element是dom元素即可,後者則要求dom必須是文件流中的元素,比較嚴格,否則不能全屏顯示。

出於安全考慮,全屏狀態下預設是不允許使用者輸入的。webkit 核心瀏覽器會阻止除方向鍵、控制鍵之外的鍵盤輸入,firefox 會在輸入時發出要求使用者退出全屏狀態的提示。前者可以通過在方法webkitrequestfullscreen()中傳入引數element.llow_keyboard_input允許使用者輸入,但 safari 一旦傳入該引數,整個 fullscreen 功能都會壞掉(這應該是 safari 的乙個bug);後者直接就可以輸入,除了有個煩人的提示。

webkit 瀏覽器中可以通過唯讀屬性document.webkitfullscreenkeyboardinputallowed檢視當前是否允許全屏狀態下的輸入。

/**

* 標準化 requestfullscreen 方法

* @param elem 要全屏顯示的元素(webkit下只要是dom即可,firefox下必須是文件中的dom元素)

*/function

requestfullscreen

(elem

)elseif(

elem

.webkitrequestfullscreen

)// safari 瀏覽器中,如果方法內有引數,則 fullscreen 功能不可用。

else

}elseif(

elem

.mozrequestfullscreen

)}

從全屏狀態中退出。目前實現的方法都是cancelfullscreen(),而不是標準的exitfullscreen()

/**

* 標準化 exitfullscreen 方法

*/function

exitfullscreen

()elseif(

document

.webkitcancelfullscreen

)elseif(

document

.mozcancelfullscreen

)}

通過該屬性的boolean值判斷瀏覽器是支援 fullscreen 功能。

webkit 核心的瀏覽器目前還沒有該屬性,因此只能通過能力判定來判斷是否支援全屏顯示功能。firefox 已經有了對應的屬性定義。

/* 標準化 fullscreenenabled 屬性 (唯讀) */

document

.fullscreenenabled=(

function

())();

當前全屏顯示的dom元素。

/**

* 標準化 fullscreenelement 屬性 (唯讀)

* 以同名方法替代

*/function

fullscreenelement

()

該屬性並未在2012/6/3的 w3草案 中出現,但在 using full-screen mode 一文中介紹了該屬性。其值為 boolean 型別,判斷當前文件的全屏狀態。

如果最終去掉這個判斷全屏狀態的屬性,我們仍然可以通過document.fullscreenelement的值是否為 null 來判斷全屏與否

/**

* 標準化 fullscreen 屬性 (唯讀)

* 以同名方法替代

*/function

fullscreen

()

該事件要繫結在 document 上,該事件僅在全屏狀態改變時觸發,預設沒有任何動作。

/* 繫結 document 的 fullscreenchange 事件 */

document

.addeventlistener

('fullscreenchange'

,// webkitfullscreenchange/mozfullscreenchange

function

(evt

),false

);/* 如果使用 jquery : */$(

document

).bind

('fullscreenchange webkitfullscreenchange mozfullscreenchange'

,function

());

標準中,通過:fullscreen偽類對全屏的元素進行樣式定義。

預設情況下,瀏覽器只會簡單地將元素設定為全屏顯示。如果該元素全屏後,高度比螢幕還高,超出的部分將會被隱藏。為了將超出部分可以滾動顯示,最頂層全屏顯示的元素要特別設定:

position

:fixed

;top:0

;left:0

;width

:100

%;height

:100

%;overflow

:auto

;

一般情況下,要全屏顯示的元素是不能像上面這樣設定的。那麼我們可以變通下,設定乙個,包圍要全屏的元素,然後將這個設定為全屏,上面的樣式定義就可以定義在這個上,相應的,:fullscreen將會作用在這個上。這樣,過長的元素就可以在這個包圍層內滾動顯示。

下面是實際中遇到的需要注意的地方:

fullscreen api 畢竟目前只是草案,尚未形成正式的標準,況且各個瀏覽器的實現情況也不完全相同,甚至細節上的實現差別更可能引發預想不到的問題。但作為漸進增強方式使用的新功能,能夠極大的增強使用者體驗。仍要根據規範的完善,不斷改進我們的**。

詳細**可以參考:

Fullscreen API 全屏顯示網頁

第一次看到應用 fullscreen api 全屏顯示網頁,是 facebook 中的 放大。作為乙個比較新的 api,目前只有 safari chrome 和 firefox 三種瀏覽器支援該特性。因為尚未發布正式版的標準,所以必須使用瀏覽器特定的方法,也就是應用新增字首 webit moz 的方...

Fullscreen API 全屏顯示網頁

要對某個元素使用全屏特效,標準的流程是 呼叫這個元素物件的 requestfullscreen 方法 瀏覽器將元素全屏顯示,改變相關的屬性值,然後觸發 document 的 fullscreenchange 事件 退出全屏時有兩種方式,一種是預設的按 esc 鍵退出,一種是呼叫 document 的...

全屏和退出全屏

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