Chrome71版本使用screenfull.js全屏功能時報參數錯誤

在生產環境長期使用的一個“全屏”功能突然失效了，查看Console 如下報錯：

Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object

項目引入了第三方的一個全屏兼容包 “screenfull.js” , 大致翻閱了下源代碼，對各瀏覽器非標准的實現做了一個映射，定位到出錯行：

    ... var keyboardAllowed = typeof Element !== "undefined" && "ALLOW_KEYBOARD_INPUT" in Element; ... if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) { elem[request](); } else { elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT); } 

此處調用requestFullscreen 時傳入的是一個布爾值，是通過判斷Element.ALLOW_KEYBOARD_INPUT的到的，該值意為支持鍵盤輸入。實際測試在71，70 及 59 版本 該值均是 undefined ，而且不傳入也同樣可以鍵盤輸入。不太清楚是否是早期版本非標准的實現。

查閱MDN文檔，Chrome在71版本實現了 FullscreenOptions （划重點），該參數參數必須是一個對象，實測 undefined 或不傳也是可以的 ，但傳入一個布爾值就直接拋出了異常。對象屬性只有一個 navigationUI。

navigationUI 的值：

auto ： 默認 ，交給處理

hide : 隱藏導航界面

show： 顯示導航界面，收縮界面元素留出更多的空間給頁面展示。

我在chrome中又嘗試了這個幾個值，未發現界面有什么不同之處。

 

原因已經查明，只要簡單做下修改即可，如果擔心早期版本報錯，那么簡單做一個判斷吧：

    if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) { elem[request](); } else { if (keyboardAllowed) { elem[request](Element.ALLOW_KEYBOARD_INPUT); } else { elem[request]({ navigationUI: "auto" }); } } 

 

重新打包 OK