HTML代码:
<a
onClick={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
);
};