Toggling fullscreen on outer document from inside an iframe

[tomas-eklund]

I've used screenfull.js on a digital signage project where the requirement was that the application should be able to reload itself completely (using location.reload()) with the application staying in full screen. After some experimentation I settled on an <iframe> solution. This way the outer document could stay in full screen while the inner document reloads. A single click anywhere on the screen (typically using a remote control on a more or less smart TV) will toggle full screen mode. The javascript is run in the inner document.

In order to get this to work I had to make a small modification to the screenfull.js library. I added a targetDocument() method which allows you to manually override the document variable.

var screenfull = {
    targetDocument: function (doc) {
        document = doc;
    },
    request: function (elem) {
    // ...

In my script I'm using it like so:

screenfull.targetDocument(window.top.document);
$(document).click(function(event){
    screenfull.toggle();
});

Doing this does not work:

$(document).click(function(event){
    screenfull.toggle(window.top.document.documentElement);
});

It fails on getting the isFullscreen property inside the toggle() method.

If you find the targetDocument() idea useful, I would very much appreciate it being added to the library. If I'm stupid (not unlikely) and have overlooked a more obvious solution please advice.

[1615450788]

Try switching to 4.0.1