screenfull 全屏页面

screenfull在线

• Github https://github.com/sindresorhus/screenfull.js/blob/main/src/screenfull.js
• MDN fullScreenAPI https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API
• 激活全屏模式 https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API/Guide
• Using the Fullscreen API in web browsers
• MDN - Fullscreen API
• W3C Fullscreen spec
• Building an amazing fullscreen mobile experience

• .request
• .exit
• .toggle
• .on
• .off
• .onchange
• .onerror
• .isFullscreen
• .element
• .isEnabled
• .raw ```jsx npm install screenfull

import screenfull from ‘screenfull’;

// 判断浏览器是否允许全屏 if (screenfull.isEnabled) { screenfull.request(); }

// 移除 on() 监听事件 screenfull.off(‘change’, callback);

vue 全屏 [https://blog.csdn.net/weixin_43926335/article/details/96309037](https://blog.csdn.net/weixin_43926335/article/details/96309037)
<a name="eUXgl"></a>
## 新页面打开全屏
创建一个 iframe来显示新页面
```jsx
import screenfull from 'screenfull';
document.querySelector('#new-page-button').addEventListener(() => {
    const iframe = document.createElement('iframe')
    iframe.setAttribute('id', 'external-iframe');
    iframe.setAttribute('src', 'https://new-page-website.com');
    iframe.setAttribute('frameborder', 'no');
    iframe.style.position = 'absolute';
    iframe.style.top = '0';
    iframe.style.right = '0';
    iframe.style.bottom = '0';
    iframe.style.left = '0';
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    document.body.prepend(iframe);
    document.body.style.overflow = 'hidden';
});

cdn

https://cdnjs.com/libraries/screenfull.js/5.1.0

js 全屏 API

• Element.requestFullscreen() 元素进入全屏模式
  • Element 通常是 HTML 节点，即 document.documentElement
• document.exitFullscreen() 退出全屏
• document.fullscreenElement 当前是否有节点处于全屏状态
• document.fullscreenEnabled 是否支持全屏模式
• document.fullscreenchange 进入全屏/离开全屏，触发 change 事件
• document.fullscreenerror 无法进入全屏时触发

进入全屏

element.requestFullscreen();
document.documentElement.requestFullscreen();

function requestFullscreen(element) {
  // w3c API
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
    // firefox
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
    // webkit内核，例如 chrome
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}
const fullscreenEnabled = document.fullscreenEnabled
     || document.mozFullScreenEnabled
     || document.documentElement.webkitRequestFullScreen;
if (fullscreenEnabled) {
  // 是否有节点处于全屏状态
  if (document.fullscreenElement) return
    requestFullscreen(document.documentElement);
}

退出全屏

document.exitFullscreen()

if(document.exitFullscreen) {
  document.exitFullscreen()
} else if (document.mozCancelFullscreen) {
  document.mozCancelFullscreen()
} else if(document.webkitCancelFullscreen) {
  document.webkitCancelFullscreen()
} else if ( document.msExitFullscreen) {
   document.msExitFullscreen()
}

浏览器全屏参考
https://blog.csdn.net/weixin_50789156/article/details/126089849