Full screen inside IFrame

Serban Vasile asked on July 10, 2019

When running inside an IFrame (Chromium browsers, IE not allowing full screen), trying to do full screen fails with the following error (found in the console dev mode). Lates version, 2.7.9 (build 07/01/2019 11:00:18) 
flexmonster.full.js.pre-build-optimizer.js:493 Uncaught (in promise) TypeError: fullscreen error
at f.MS3G.f.enterFullscreen (flexmonster.full.js.pre-build-optimizer.js:493)
at f.MS3G.f.toggleFullscreen (flexmonster.full.js.pre-build-optimizer.js:490)
at f.MS3G.f.fullscreenHandler (flexmonster.full.js.pre-build-optimizer.js:432)
at HTMLAnchorElement.__zone_symbol__ON_PROPERTYclick (flexmonster.full.js.pre-build-optimizer.js:502)
at HTMLAnchorElement.F (zone.js.pre-build-optimizer.js:1332)
at t.invokeTask (zone.js.pre-build-optimizer.js:423)
at Object.onInvokeTask (core.js.pre-build-optimizer.js:17280)
at t.invokeTask (zone.js.pre-build-optimizer.js:422)
at e.runTask (zone.js.pre-build-optimizer.js:195)
at e.invokeTask [as invoke] (zone.js.pre-build-optimizer.js:498)

5 answers

Public
Vera Didenko Flexmonster July 12, 2019

Hello,
 
Thank you for writing to us.
 
Our team has not managed to reproduce this issue on our side. 
 
We have tried using the 2.7.9 version of Flexmonster in an iframe in Chrome, Firefox, and Chromium browsers.
 
Could you please provide more details on how to reproduce the issue so we may help you solve this problem?
Any sensitive information can be provided via email.
 
We are looking forward to hearing from you.
 
Best Regards,
Vera

Public
Serban Vasile July 17, 2019

I don’t know how to help you get the exact context of the error.
See the attached screenshot I got when I enabled caught exceptions pause in the debugger.
If you guide me on what to look for, I can go deeper in the debugging for you.

Attachments:
Clipboard01.jpg

Public
Serban Vasile July 17, 2019

See how the screen looks like. The same error happens when trying to revert the full screen from this place back by clicking the full screen button again.

Attachments:
Clipboard02.jpg

Public
Vera Didenko Flexmonster July 18, 2019

Hello,
 
Thank you for your reply.
 
 
We kindly suggest specifying the allowfullscreen attribute in the iframe, for example:

<iframe allowfullscreen></iframe> 

Please let us know if this helps to solve the problem.
 
 
Our team has not managed to reproduce the issue. We have prepared a sample Angular project using Flexmonster in an iframe (attached below). 
 
In order to run it, please run the following commands in the project’s directory:
1) npm install
2) ng serve
 
Could you please let us know if it works fine for you? If so, could you please modify this sample so that the issue is reproducible?
 
This will greatly help us to understand the situation better.
 
We are looking forward to hearing from you.
 
Best Regards,
Vera

Public
Serban Vasile July 18, 2019

allowfullscreen attribute for the iframe worked!
Thank you much for the quick resolution.

Please login or Register to Submit Answer