//设置初始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.requestFullscreen();
} else if (dom.mozRequestFullScreen) {
dom.mozRequestFullScreen();
} else if (dom.webkitRequestFullScreen) {
dom.webkitRequestFullScreen();
}
};
exitFullscreen(){
var dom = document;
if (dom.exitFullscreen) {
dom.exitFullscreen();
} else if (dom.mozCancelFullScreen) {
dom.mozCancelFullScreen();
} else if (dom.webkitCancelFullScreen) {
dom.webkitCancelFullScreen();
}
};
//监听作用
watchFullScreen(){
console.log(document.webkitIsFullScreen)
const _self = this;
document.addEventListener(
"webkitfullscreenchange",
function() {
_self.setState({
isFullScreen: document.webkitIsFullScreen
});
},
false
);
};