CODEWITHSUNDEEP
javascriptecmascript-6
Халид Хан
Халид Хан

Reputation: 57

Uncaught TypeError: Illegal invocation javascript

how fix Illegal invocation when call function in this class

new FullScreen().request(); // Uncaught TypeError: Illegal invocation
new FullScreen().cancel(); //Uncaught TypeError: Illegal invocation
new FullScreen().toggle(); //Uncaught TypeError: Illegal invocation 

import validator from "Validator";

export default class FullScreen {
    constructor() {
        if (validator.checkValueType(Modernizr.fullscreen, "BOOLEAN") && Modernizr.fullscreen) {
            this.requestFullscreen = document.documentElement.requestFullscreen || document.documentElement.msRequestFullscreen ||
                document.documentElement.mozRequestFullScreen || document.documentElement.webkitRequestFullscreen;
            this.cancelFullScreen = document.cancelFullScreen || document.msCancelFullScreen || document.mozRequestFullScreen || document.webkitRequestFullscreen;
        } else {
            throw new UserException("Fullscreen not supported in this browser");
        }

    }

    request() {
        this.requestFullscreen();
    }

    cancel() {
        this.cancelFullScreen();
    }

    isFullScreen() {
        return document.isFullScreen || document.msIsFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
    }

    toggle() {
        if (this.isFullScreen()) this.cancel();
        else this.request();
    }
}

Upvotes: 1

Views: 2491

Answers (2)

Joundill
Joundill

Reputation: 7533

Without testing it, my best guess is that you've lost the context of the document. I'd suggest shifting the document element into your methods.

import validator from "Validator";

export default class FullScreen {
    constructor() {
        if (!validator.checkValueType(Modernizr.fullscreen, "BOOLEAN") && Modernizr.fullscreen) {
            throw new UserException("Fullscreen not supported in this browser");
        }
    }

    request() {
        document.documentElement.requestFullscreen || document.documentElement.msRequestFullscreen ||
                document.documentElement.mozRequestFullScreen || document.documentElement.webkitRequestFullscreen;
    }

    cancel() {
        document.cancelFullScreen || document.msCancelFullScreen || document.mozRequestFullScreen || document.webkitRequestFullscreen;
    }

    isFullScreen() {
        return document.isFullScreen || document.msIsFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
    }

    toggle() {
        if (this.isFullScreen()) this.cancel();
        else this.request();
    }
}

Upvotes: 3

Siyuan Ren
Siyuan Ren

Reputation: 7844

this in Javascript is context related. When you call this.request(), it translates to this.requestFullscreen(). When this.requestFullscreen = document.documentElement.requestFullscreen, this.requestFullscreen() != document.documentElement.requestFullscreen(). Instead, this.requestFullscreen() == document.documentElement.requestFullscreen.call(this). In another words, the requestFullscreen function expects a documentElement as this pointer, but it gets a FullScreen instance, resulting in a illegal invocation exception. To fix the error, you need to bind the context in the constructor.

Upvotes: 3

Related Questions