TypeError: Document not active on exitFullscreen

[ameensom]

Hello

I've been getting this error on loading the component, it is releated to screenfull.js

Browser Report :

Uncaught (in promise) TypeError: Document not active
    at exit (requests-new-requests-new-module-ngfactory~requests-old-requests-old-module-ngfactory.c31c04ce286bdb4bfcb7.js:formatted:258)
    at n.ngOnChanges (requests-new-requests-new-module-ngfactory~requests-old-requests-old-module-ngfactory.c31c04ce286bdb4bfcb7.js:formatted:490)
    at vendor.cca2f135bd1b8e11a575.js:1
    at vendor.cca2f135bd1b8e11a575.js:1
    at $s (vendor.cca2f135bd1b8e11a575.js:1)
    at Ea (vendor.cca2f135bd1b8e11a575.js:1)
    at Object.updateDirectives (requests-new-requests-new-module-ngfactory~requests-old-requests-old-module-ngfactory.c31c04ce286bdb4bfcb7.js:formatted:215)
    at Object.updateDirectives (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at na (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at na (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at na (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at na (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at na (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at na (vendor.cca2f135bd1b8e11a575.js:1)
    at Zs (vendor.cca2f135bd1b8e11a575.js:1)
    at ia (vendor.cca2f135bd1b8e11a575.js:1)
    at ra (vendor.cca2f135bd1b8e11a575.js:1)

Sentry highlighted the following line

./node_modules/screenfull/dist/screenfull.js.pre-build-optimizer.js

    } else {
                elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT);
            }
        },
        exit: function () {
            document[fn.exitFullscreen]();
        },
        toggle: function (elem) {
            if (this.isFullscreen) {
                this.exit();
            } else {

[jpilfold]

Are you able to create a Stackblitz or something that reproduces the issue please?

[ameensom]

I don't think that's possible

[jpilfold]

@ameensom It will be incredibly difficult to fix this issue if I'm not able to reproduce it

[jpilfold]

@ameensom Do you have a repository I can clone that exhibits this behaviour? If not, can you at least give me the steps necessary to reproduce this issue? Without, I will need to close this issue.

[diegocr]

Googling for TypeError: Document not active gives only one result, this repo's ticket/issue - awesome SEO opportunity! ;-)

Seriously, as of Chrome 71, it looks like that exception is thrown when invoking document.exitFullscreen() while not in full-screen mode, so the fix is quite obvious :)

[wendyjw]

I also encountered this problem in Chrome 71

[xristostz]

I had the same issue since the last Chrome update to 71. In case this is helpful, this is the error when loading the component: screenfull.js:102 Uncaught (in promise) TypeError: Document not active at exit (screenfull.js:102) at ToggleFullscreenDirective.ngOnChanges (ngx-image-viewer.es5.js:289) at checkAndUpdateDirectiveInline (core.js:12093) at checkAndUpdateNodeInline (core.js:13599) at checkAndUpdateNode (core.js:13542) at debugCheckAndUpdateNode (core.js:14414) at debugCheckDirectivesFn (core.js:14355) at Object.eval [as updateDirectives] (ImageViewerComponent.html:2) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14340) at checkAndUpdateView (core.js:13509)

[shrijoshi24]

I am seeing this document.exitFullscreen() error as well on Chrome 71. Didn't happen on the previous versions. Is there a fix for this or we expect it to be fixed with next version of Chrome?

[gerald-odonnell7]

SOLUTION:

Go into lg-fullscreen.min.js and surround:

{document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()}

with:

{(window.fullScreen) ? document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen() : ''}

where you are adding (window.fullScreen) ? in front of the given code and then put a colon and two apostrophes after (that is not a quote but two apostrophes).

[turnono]

This seems to fix it: exit: function() { if (document.fullscreen) { documentfn.exitFullscreen; } },

[artf]

document.fullscreen is deprecated, instead you should use the document.fullscreenElement with vendor prefixes

if (document.fullscreenElement || 
    document.webkitFullscreenElement || 
    document.mozFullScreenElement) {
    // can use exitFullscreen
}

[ManyRouc]

Hi there,

I juste encountred the same issue with screenfull, here is my solution that fixed this :+1:

1. Go to the file : ~src/node_modules/screenfull/dist/screenfull.js

2. find around line 100 the exit function

3.replace with the following :

        exit: function () {
            if (this.isFullscreen) {
                document[fn.exitFullscreen]();
            }
        },

Cheers

[sachinchoolur]

The issue has been fixed in the original lightGallery. Thanks for pointing this out

[krakapuzlis]

So what have you guys done with this problem? How you manage to get rid of it?

[MsumanP]

I am still getting same error.

[BH-GeGe]

document.fullscreen is deprecated, instead you should use the document.fullscreenElement with vendor prefixes

if (document.fullscreenElement || 
  document.webkitFullscreenElement || 
  document.mozFullScreenElement) {
  // can use exitFullscreen
}

This solution has been solved.👍

[l1nknyto]

The error is also happened when my application starting.

Uncaught (in promise) TypeError: Document not active at Object.exit (screenfull.js:102) at ToggleFullscreenDirective.ngOnChanges (fullscreen.directive.ts:18)

I see this error too on demo page ( https://angular-2wrbwp.stackblitz.io/ )

I eliminate it by checking variable changes, skip if this is the first change. Working so far, but i don't know the side effect.

export class ToggleFullscreenDirective implements OnChanges {
...
    ngOnChanges(changes: SimpleChanges) {
        if (!changes.isFullscreen.isFirstChange()) {
          if (this.isFullscreen && screenfull.enabled) {
            screenfull.request(this.el.nativeElement);
          } else if (screenfull.enabled) {
            screenfull.exit();
          }
        }
    }
}

[muscaiu]

I'm having a similar issue: https://stackoverflow.com/questions/59106462/document-is-not-active

[Shriraam-Ramesh]

Use this, var elem = document.documentElement; if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } for opening full screen and this,

if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } for closing full screen.

Hope this helps. @ameensom

[txwizard]

How do you respond when the exception is raised in a package, such as https://github.com/jplayer/jPlayer? Would it help in this case to register a listener? For now, I'm not going to worry too much, since the full screen mode exits as expected.

[CodeOutput]

This seems to fix it: exit: function() { if (document.fullscreen) { documentfn.exitFullscreen; } },

exit: function() { if (document.fullscreen) { document[fn.exitFullscreen](); } } is working

[Mostafa-Fathi]

This seems to fix it: exit: function() { if (document.fullscreen) { documentfn.exitFullscreen; } },

exit: function() { if (document.fullscreen) { document[fn.exitFullscreen](); } } is working

so where i should use this lines ?