iframe
中嵌入游戏地址,需要设置全屏或者禁止全屏,因此需要对iframe
的某些属性和特性有一定了解,元素全屏会调用到全屏api。
iframe 全屏相关属性
allowfullscreen
是iframe是否可以设置全屏的属性,或者通过allow
特征属性的设置。 当allowfullscreen
:true,或者allow:"fullscreen",是可以允许调用requestFullscreen()
设置全屏,且在各个浏览器兼容性挺高。或者通过HTTPFeature-Policy
头fullscreen
指令控制是否允许当前文档使用全屏相关apiElement.requestFullScreen()
.
注意点:由于之前测试,是使用allow进行设置功能策略,没使用http
响应抬头设置,周一需要测试下,是否采取这种方式,能够使各个浏览器都能兼容。今天本地测试的时候,使用的是allow方式测试这个功能,发现在同源情况下即使不设置对应属性,也可以通过调用api,去控制全屏。查看官方文档,发现相关信息如下:
developer.mozilla.org/en-US/docs/…
全屏相关api:
requestFullscreen()
执行全屏api
let requestFullscreen= (el)=>{
return (el.requestFullscreen||el.webkitRequestFullscreen||el.mozRequestFullScreen||el.msRequestFullscreen).call(el)}
}
exitFullscreen()
退出全屏api
let exitFullscreen= ()=>{
return (document.exitFullScreen||document.webkitExitFullscreen||document.mozCancelFullScreen||document.msExitFullscreen).call(document)}
}
fullscreenElement
获取当前全屏的元素
let getFullscreenElement=()=> {
return (
document.fullscreenElement ||document.webkitFullscreenElement||document.mozFullScreenElement ||document.msFullScreenElement ||null
);
}
fullscreen
当前浏览器是否全屏
let isFullScreen=()=> {
return !! (
document.fullscreen || document.webkitFullScreen || document.mozFullScreen||document.msFullScreen
);
}
fullscreenEnabled
当前浏览器是否支持全屏
let isFullscreenEnabled=()=> {
return (
document.fullscreenEnabled ||document.webkitFullscreenEnabled ||document.mozFullScreenEnabled ||document.msFullscreenEnabled
);
}
fullscreenchange
监听全屏事件
element.addEventListener('fullscreenchange', function(e) {
if (isFullScreen()) {
/* make it look good for fullscreen */
} else {
/* return to the normal state in page */
}
}, true);