iframe设置全屏

3,549 阅读1分钟

iframe中嵌入游戏地址,需要设置全屏或者禁止全屏,因此需要对iframe的某些属性和特性有一定了解,元素全屏会调用到全屏api。

iframe 全屏相关属性

  • allowfullscreen是iframe是否可以设置全屏的属性,或者通过allow特征属性的设置。 当allowfullscreen:true,或者allow:"fullscreen",是可以允许调用 requestFullscreen()设置全屏,且在各个浏览器兼容性挺高。或者通过HTTPFeature-Policyfullscreen指令控制是否允许当前文档使用全屏相关apiElement.requestFullScreen().

image.png

注意点:由于之前测试,是使用allow进行设置功能策略,没使用http响应抬头设置,周一需要测试下,是否采取这种方式,能够使各个浏览器都能兼容。今天本地测试的时候,使用的是allow方式测试这个功能,发现在同源情况下即使不设置对应属性,也可以通过调用api,去控制全屏。查看官方文档,发现相关信息如下:

image.png developer.mozilla.org/en-US/docs/…


全屏相关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);