HTML 5+Reactフルスクリーンの方法の実践
1889 ワード
フルスクリーンの条件を実現します. JavaScript を実現しました. click、mousewn、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.webkitRequestFullScreen) {
ele.webkitRequestFullScreen();
}
}
//
exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
};
// button ， state ，
handleClick = () => {
const {data} = this.state;
let result = '';
if (data === ' ') { // ， data
this.requestFullScreen();
result = ' ';
} else if (data === ' ') { // ， data
this.exitFullscreen();
result = ' ';
}
this.setState({
data: result
})
}
render(){
const {data} = this.state;
return(
)
}
}
export default SmartSeller;