React 实现页面全屏效果

HTML代码：

<aonClick={this.fullScreen}style={{ margin: "0 6px 0 6px"}}
>全屏</a>

js代码：

state = {   isFullScreen: false
}
componentDidMount = () => {this.watchFullScreen()
}fullScreen = () => {
console.log('fullscreen:',this.state.isFullScreen);if (!this.state.isFullScreen) {this.requestFullScreen();} else {this.exitFullscreen();}
};//进入全屏
requestFullScreen = () => {console.log('requestFullScreen')var de = document.documentElement;if (de.requestFullscreen) {de.requestFullscreen();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();}
};//退出全屏
exitFullscreen = () => {
console.log('exitFullscreen')var de = document;if (de.exitFullscreen) {de.exitFullscreen();} else if (de.mozCancelFullScreen) {de.mozCancelFullScreen();} else if (de.webkitCancelFullScreen) {de.webkitCancelFullScreen();}
};//监听fullscreenchange事件
watchFullScreen = () => {const _self = this;document.addEventListener("webkitfullscreenchange",function() {_self.setState({isFullScreen: document.webkitIsFullScreen});},false);
};

React 实现页面全屏效果相关推荐

让HTML页面也可以实现全屏效果
当前页面全屏化本人今天看到一个页面全屏化的功能,觉得很不错,以后可能用到,所以贴出来,让大家使用,转载的别人的代码,不喜勿喷,本人测试,非常好用,谢谢! 首先展示效果: 下面是代码 JavaScri ...
react 实现组件全屏
在浏览器中访问页面,需要对页面中的其中一个组件能够实现全屏展示实现效果直接复制下面代码到项目中即可使用 import React, { Component } from 'react';const ...
html实现全屏效果原理,HTML5 实现全屏效果
HTML5 实现全屏效果点击进入全屏和点击退出全屏方法: //进入全屏 function requestFullScreen() { var de = document.documentElemen ...
js如何设置浏览器全屏效果？
现在很多网页游戏进入游戏界面后都是全屏显示的效果,很多人问我这个要怎么实现,其实这个只要调用Fullscreen API就可以实现了作为一个比较新的 API,目前只有 Safari.Chrome 和 ...
iOS视频播放全屏效果实现
概述最近在做有关音视频的项目,项目中涉及到全屏播放切换的问题,最近研究了一下.在此做个记录,实现全屏效果我目前能够用两种方法实现,一种是让App需要进行全屏的页面随着设备进行旋转,另外一种是把需要全 ...
html自动全屏js,js实现简单页面全屏
本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下全屏效果为传入div元素全屏: 代码块 js控制页面的全屏展示和退出全屏显示 js控制页面的全屏展示和退出全屏显示 #content ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计...
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...

React 实现页面全屏效果

React 实现页面全屏效果相关推荐

最新文章

热门文章