html5+ React -进入和退出全屏实现
html5已经支持全屏API，不同浏览器实现方式不一，以下为兼容方案：
一、不同浏览器的进入和退出全屏实现
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();二、全屏兼容方案
function requestFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}三、退出全屏兼容方案
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}四、检查全屏状态变化
通过监听fullscreenchange事件，不同浏览器，判断的属性不一样
//W3C下监听fullscreenchange事件，判断 document.fullscreen 属性
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);
//moz下监听 mozfullscreenchange 事件，判断document.mozFullScreen属性
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
//chrome下监听webkitfullscreenchange事件，判断 document.webkitIsFullScreen 属性
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);五、设置全屏时样式
通过设置full-screen 伪类 给全屏设置样式，全屏时自动生效
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}六、一个完整的例子–全屏按钮测试
html代码：
//全屏按钮
<a
onClick={this.fullScreen}
style={{ margin: "0 6px 0 6px"}}
>
<IconFont type="icon-fullscreenalt" style={{ color: "rgba(0, 0, 0, 0.65)"}} />
a>js代码：
this.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(
"fullscreenchange",
function() {
_self.setState({
isFullScreen: document.fullscreen
});
},
false
);
document.addEventListener(
"mozfullscreenchange",
function() {
_self.setState({
isFullScreen: document.mozFullScreen
});
},
false
);
document.addEventListener(
"webkitfullscreenchange",
function() {
_self.setState({
isFullScreen: document.webkitIsFullScreen
});
},
false
);
};
七、注意事项
- 全屏效果JavaScript实现
- 全屏效果
click, mousedwon, mouseup事件才能触发.
这点要特别注意。若直接调用全屏代码，会报
fullScreen. Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.的警告。
参考链接：https://stackoverflow.com/questions/32642865/failed-to-execute-requestfullscreen-on-element-api-can-only-be-initiated-by
解释：全屏效果一般要在用户交互场景下才能触发。若用户进入一个网站时，没有任何操作就显示全屏，用户会很困惑这样的行为。
- 全屏方法为：
全屏元素.requestFullScreen();目前不同的浏览器需要不同的前缀，如mozRequestFullScreen或webkitRequestFullScreen - 取消全屏为：
全屏元素.cancelFullScreen();同样，不同浏览器需要添加私有前缀，如mozCancelFullScreen或webkitCancelFullScreen - 可以通过
document.fullScreen判断浏览器是否处于全屏状态。注意：FireFox和Chrome写法上有不同，Webkit内核浏览器需要增加个is, 如document.webkitIsFullScreen;而Firefox则是document.mozFullScreen. :full-screen{}用在CSS代码中，可以控制全屏元素（及其子元素）全屏状态时的样式。同样，不同浏览器不同前缀。如:-moz-full-screen{}或:- webkit-full-screen{}.- 一个页面如果有多个全屏元素，在CSS控制的时候，可以使用类似
#element:full-screen{}的选择器分别控制。
八、改进版本
既是方法执行（如果是方法），又是属性判断（是否支持属性）：
<button onClick="runPrefixMethod(document.documentElement, 'RequestFullscreen')">点击全屏button>