createFullscreen

创建全屏事件，兼容各大浏览器，如果使用 React 组件，建议使用 useFullScreen Hook。

使用例子

最好每次都绑定前，移除上次的全屏绑定事件，防止事件没移除，导致多次绑定。 当然也可以通过组件销毁钩子进行移除事件。

const fullscreenObj = createFullscreen(
  targetDOM,
  targetDOM.ownerDocument || document,
  () => {
    const isFull = !!fullscreenObj.fullscreenElement;
    if (!isFull) {
      //非全屏，移除监听器。
       fullscreenObj.remove();
    }
  }
);

if (fullscreenObj.isDomFullscreenSupported) {
  const isFull = !!fullscreenObj.fullscreenElement;
  if (!isFull) {
    fullscreenObj.requestFullscreen();
  } else {
    fullscreenObj.exitFullscreen();
  }
} else {
  // 异常处理
}

参数

参数	说明	默认值
elementContext	全屏目标对象	-
documentContext	document 对象	-
changeCallback?	全屏状态回调函数，无参数。	-

返回值

 {
    readonly isDomFullscreenSupported: boolean; // 是否支持全屏
    requestFullscreen(): void; // 触发全屏
    exitFullscreen(): void; // 退出全屏
    readonly fullscreenElement: Element | null | undefined; // 当前正在全部的 dom 元素，一般用来不判断是否在全屏状态
    remove(): void; // 移除 fullscreen 监听器
  }