全屏API：哪些事件被觸發？

Question

我需要知道當用戶通過新的Fullscreen API進入全屏模式時觸發哪個（DOM）事件。我試過例如這個片段，但它不火：

jQuery('body').on('fullScreenChange', function() { alert("Fired!"); }); 

Answer 1

您的鏈接shows the answer ...

當成功地從事全屏模式，包括全屏幕元素的文檔收到fullscreenchange事件。退出全屏模式後，文檔將再次收到fullscreenchange事件。請注意，fullscreenchange事件本身不提供有關文檔是進入還是退出全屏模式的任何信息，但如果文檔的非空值爲fullScreenElement，則說明您處於全屏模式。

Answer 2

有no fullscreenChange event in native jQuery。但也有一些這使您可以訪問事件的第三方插件：

• http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
• https://github.com/ruidlopes/jquery-fullscreen/blob/master/jquery.fullscreen.js
• https://github.com/hdragomir/jQuery-Fullscreen-Event
• https://github.com/ruidlopes/jquery-fullscreen

正如你可以看到他們的代碼有沒有乾淨的API訪問這種類型的事件。

Answer 3

我所用：

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', fn); 

它激發了Safari瀏覽器，Chrome瀏覽器和Firefox（沒有測試等）。 webkit和moz之間的結果上下文似乎存在細微的差異，因此元素的高度和寬度是不同的。但事件發生，這是你的問題。

哦。並且注意使用alert('fs')進行全屏測試。它經常干擾屏幕更換。