react 实现页面（组件）全屏显示

最新推荐文章于 2025-04-28 09:08:58 发布

QiBarbara

最新推荐文章于 2025-04-28 09:08:58 发布

阅读量5.4k

点赞数

分类专栏：前端文章标签： react 前端

本文链接：https://blog.youkuaiyun.com/weixin_41606276/article/details/101062674

版权

本文介绍了如何在React应用中实现页面或组件的全屏显示功能，包括全屏API的使用，以及在不同浏览器下的兼容性处理。通过结合React的状态管理和事件处理，创建一个全屏按钮，点击后可以使组件进入和退出全屏模式。

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

//设置初始state
constructor(props){
        super(props);
        this.state={
            isFullScreen: false
        }
        this.fullScreen=this.fullScreen.bind(this);//全屏显示
        this.requestFullScreen=this.requestFullScreen.bind(this);//进入全屏
        this.exitFullscreen=this.exitFullscreen.bind(this);//退出全屏
        this.watchFullScreen=this.watchFullScreen.bind(this);//监听fullScreen事件
}

 fullScreen(){
        let isFullScreen=this.state.isFullScreen;
        if (!this.state.isFullScreen) {
            this.requestFullScreen();
        } else {
            this.exitFullscreen();
        }
        this.setState({
            isFullScreen:!isFullScreen
        })
    };
    requestFullScreen(){
        var dom = document.getElementById('monitorDataFlowContainer');//绑定想要全屏的组件
        if (dom.requestFullscreen) {
            dom.requestFu

最低0.47元/天解锁文章