JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<script>
if (!Element.prototype.fullScreen) {
    var full_screen = function (element) {
        var self = this;

        this.change = null;
        var isFullScreen = this.isFullScreen = function () {
            return (document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) ? true : false;
        };
        this.requestFullScreen = function () { //https://stackoverflow.com/a/33768712
            // Supports most browsers and their versions.
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
                self.change(isFullScreen());
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                    self.change(isFullScreen());
                }
            }
        };
        this.exitFullscreen = function () {
            var exitMethod = document.fullscreenElement || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
            if (exitMethod) {
                exitMethod.call(document);
                self.change(isFullScreen());
            }
        };

        var _change = function (e) {
            if (e.keyCode && e.keyCode !== 27)
                return;

            if (self.change)
                self.change(isFullScreen());
        };

        this.dispose = function () {
            document.removeEventListener("fullscreenchange", _change);
            document.removeEventListener("mozfullscreenchange", _change);
            document.removeEventListener("webkitfullscreenchange", _change);
            document.removeEventListener("msfullscreenchange",...

JavaScript

var _fullscreen = document.querySelector('img').fullScreen;
 _fullscreen.change = function (status) {
    console.log(status);
 };
document.querySelector('button').addEventListener("click", function(){
 if (_fullscreen.isFullScreen())
    _fullscreen.exitFullscreen();
 else
    _fullscreen.requestFullScreen();
});