HTML5+React全屏方法实践

最新推荐文章于 2025-02-05 15:52:41 发布

小小晴_

最新推荐文章于 2025-02-05 15:52:41 发布

阅读量600

点赞数 1

本文链接：https://blog.youkuaiyun.com/alberqing_/article/details/84788412

版权

本文介绍了如何在HTML5和React中实现全屏功能。通过JavaScript事件监听（click、mousedown、mouseup）触发全屏，详细讲解了全屏及退出全屏的方法，并提供了兼容不同浏览器的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现全屏的条件

JavaScript实现
click、mousedown、mouseup事件触发
全屏的方法
- 全屏元素.requestFullscreen(),如果想做到浏览器的兼容，可在requestFullscreen()前加上前缀，火狐为mozRequestFullScreen,chrome为webkitRequestFullScreen()
取消全屏的方法
- 取消全屏元素.cancleFullscreen,兼容办法：在其前加上前缀，火狐为mozCancelFullScreen(),chrome为webkitCancelFullScreen()

一个事例的代码片段

import React from 'react';

class SmartSeller extends React.Component {
	state = {
		data: '点击全屏'
	}
	// 全屏
	requestFullScreen = () => {
        const ele = document.documentElement;
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.webkitRe