fullScreen 实现获取当前环境支持的全屏API方法名

为了确保全屏功能的跨浏览器兼容性，需要定义几个关键的API名称数组：

全屏方法API名称数组：用于启动全屏模式。退出全屏方法API名称数组：用于退出全屏模式。获取当前全屏元素API名称数组：用于检索当前处于全屏状态的元素。检查全屏支持API名称数组：用于判断浏览器是否支持全屏功能。

这些数组有助于识别不同浏览器所支持的全屏 API。通过实现一个getFullscreenMethod函数，传入上述方法数组以及目标对象（Document或Element），便可检测并选定当前环境支持的全屏方法。如此一来，在fullScreen.ts文件中直接调用getFullscreenMethod，因为它在文件加载时就能确定当前环境支持的全屏方法，避免了在每次调用全屏相关方法时重复进行判断，从而提升了效率。

// 定义全屏方法的API名称数组，用于不同浏览器的兼容性
const FULLSCREEN = [
    "requestFullscreen", /* 标准API */
    "mozRequestFullScreen", /* Firefox */
    "webkitRequestFullscreen", /* Chrome, Safari & Opera */
    "msRequestFullscreen" /* IE/Edge */
];
// 定义退出全屏方法的API名称数组，用于不同浏览器的兼容性
const EXITFULLSCREEN = [
    "exitFullscreen", /* 标准API */
    "mozCancelFullScreen", /* Firefox */
    "webkitExitFullscreen", /* Chrome, Safari and Opera */
    "msExitFullscreen" /* IE/Edge */
];
// 定义获取当前全屏元素的API名称数组，用于不同浏览器的兼容性
const FULLSCREENELEMENT = [
    "fullscreenElement",
    "mozFullScreenElement",
    "webkitFullscreenElement",
    "msFullscreenElement"
];
// 定义检查是否支持全屏的API名称数组，用于不同浏览器的兼容性
const FULLSCREENENABLED = [
    "fullscreenEnabled",
    "mozFullScreenEnabled",
    "webkitFullscreenEnabled",
    "msFullscreenEnabled"
];
// 根据传入的方法数组和目标对象（Document或Element），找到可用的全屏方法
function getFullscreenMethod(methods: string[], target: Document | Element) {
    return methods.find(method => method in target);
}
// 获取全屏方法、退出全屏方法、全屏元素和全屏支持状态
const fullscreenMethod = getFullscreenMethod(FULLSCREEN, document.documentElement);
const exitFullscreenMethod = getFullscreenMethod(EXITFULLSCREEN, document);
const fullscreenElement = getFullscreenMethod(FULLSCREENELEMENT, document);
const fullscreenEnabled = getFullscreenMethod(FULLSCREENENABLED, document);
/**
 * 检查Web API是否支持全屏模式
 * 如果由于任何原因（例如 "fullscreen" 特性不被允许，或不支持全屏模式）而无法启用全屏模式，此值为 false
 */
export const isWebAPIFullscreenEnabled: boolean = fullscreenEnabled ? (document as any)[fullscreenEnabled] : false;

获取全屏元素&是否有全屏元素

/**
 * 获取全屏元素
 * @param customClassName? string - 如果提供了customClassName，则返回具有该类的元素
 * @returns Element - 返回全屏元素或者null
 */
export function fullscreenEle(customClassName?: string) {
    if (customClassName) {
        return document.querySelector(customClassName);
    }
    return fullscreenElement && (document as any)[fullscreenElement] || null;
}
/**
 * 判断当前DOM上是否有全屏元素

 * @param customClassName? string - 如果提供了customClassName，则检查是否有该类的全屏元素
 * @returns boolean - 返回是否有全屏元素
 */
export function isFullscreen(customClassName?: string) {
    return !!fullscreenEle(customClassName);
}

指定元素全屏

/**
 * 让指定元素全屏
 * @param ele Element - 要全屏的元素
 * @param options? {
 *     navigationUI?: "hide" | "show" | "auto", - 控制全屏时导航栏的显示
 *     screen?: any, - 用于传递额外的屏幕参数
 *     customClassName?: string - 当不支持全屏API时，用于绝对定位的CSS类名
 * }
 * @returns Promise - 返回一个Promise，表示全屏操作的结果
 */
export async function fullScreen(ele: Element, options?: {
    navigationUI?: "hide" | "show" | "auto",
    screen?: any,
    customClassName?: string
}) {
    if (options?.customClassName) {
        return new Promise((resolve, _) => {
            if (!ele.classList.contains(options.customClassName!)) {
                ele.classList.add(options.customClassName!);
            }
            resolve(true);
        });
    }
    if (fullscreenMethod) {
        return await (ele as any)[fullscreenMethod](options);
    }
}

退出全屏

/**
 * 退出全屏的方法
 * @param options? {
 *     ele: Element, - 要退出全屏的元素
 *     customClassName: string - 当不支持全屏API时，用于绝对定位的CSS类名
 * }
 * @returns Promise - 返回一个Promise，表示退出全屏操作的结果
 */
export async function exitFullScreen(options?: {
    ele: Element,
    customClassName: string
}) {
    if (options?.ele) {
        return new Promise((resolve, _) => {
            if (options.ele.classList.contains(options.customClassName)) {
                options.ele.classList.remove(options.customClassName);
            }
            resolve(true);
        });
    }
    if (exitFullscreenMethod && isFullscreen()) {
        return await (document as any)[exitFullscreenMethod]();
    }
}

FAQ

全屏API提供了如下事件:

在实现绝对定位方案最大化元素方案时，使用Promise进行了一层包装。如此一来，后续若希望元素具备监听事件以执行相关操作，可在Promise方法内使用自定义事件，并定义自己的事件名来达成目的。

感谢阅读,敬请斧正!