HTML5+React全屏方法实践

实现全屏的条件

• JavaScript实现

• click、mousedown、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.webkitRe