onfullscreenchange DOM事件

Question

作爲標題讀取，我想知道當瀏覽器進入/退出全屏模式時，觸發事件的最可靠方法是什麼。

note：我不是問如何全屏顯示當前頁面，我只想知道是否有辦法排隊某些任務，如用戶，例如，按F11或任何其他相關的全屏進入鑰匙。

Answer 1

screen.width和screen.height告訴你用戶的屏幕分辨率，那麼試試這個：

var fullscreen; 
function onfullscreenchange(full) { 
    ... 
} 

// You might want to use addEventListener and its equivalents instead 
window.onresize = function() { 
    if (window.outerWidth === screen.width && window.outerHeight === screen.height) { 
     if (!fullscreen) { 
      fullscreen = true; 
      onfullscreenchange(true); 
     } 
    } else { 
     if (fullscreen) { 
      fullscreen = false; 
      onfullscreenchange(false); 
    } 
}; 

我知道這個ISN這種做法最乾淨或最穩健，但希望它能給你一個想法。值得注意的是，IE < 9需要一種不同的方法來確定窗口大小，所以我會留給你看看。

Answer 2

有一個用於Javascript的proposed Fullscreen API，它可以讓你連接到onfullscreenchange事件。

但是，在這個時候，我對瀏覽器支持並不樂觀。

Answer 3

有一個plugin available for jQuery（我知道你不使用jQuery）.....它所做的是聽按下窗口上的按鍵 - 所以它聽着F11被按下等...不是最好的解決方案，但一個可能的工作

的，短期我認爲你難倒...

一個念頭......

我只是碰到這種頁面跌跌撞撞 - >http://www.javascriptkit.com/howto/newtech3.shtml

JavaScript可以檢測大小的scr een使用screen.width/screen.height ...也許使用resize事件來查看瀏覽器是否匹配屏幕大小，即全屏？

@Nathans答案是正是我一直在談論...

Answer 4

如何有關使用該jQuery plugin

是的，我知道有可能是一個純js的方式，但是這是很容易的。

Answer 5

當我偶然發現這個問題時，我正在處理這個事件，我想分享我所瞭解的內容，即使它不會解決這個問題。現在支持前綴by modern desktop browsers and Chrome for Android的onfullscreenchange事件，但也有一些事情要心裏有：

• 此事件不會觸發，當窗口進入全屏模式，我知道這聽起來有些不可思議，但似乎僅用於文檔及其元素。因此，如果文檔的某個元素全屏顯示，則會觸發該事件，但是如果使用鍵盤快捷鍵使瀏覽器全屏顯示，則不會。

• 在鉻和的Safari的功能可以通過定義文檔方法document.onwebkitfullscreenchange = myFunc;或通過定義元法myElem.onwebkitfullscreenchange = myFunc;，也可以使用的addEventListener myElem.addEventListener("webkitfullscreenchange", myFunc);訂閱該事件。在IE和火狐事件將工作只有當該方法是在文件中所定義和使用的addEventListener不會觸發事件。

下面是本次活動中，MDN Using fullscreen mode更多信息的Codepen Demo。

---

更新。從MDN網絡文檔：

因爲並非所有瀏覽器都實現API的版本前綴的時刻（對於供應商無關的訪問全屏API，你可以使用Fscreen）。