Requesting full screen refreshes data (html canvas) in object tag

Question

I have a button on the view page that makes the object tag with id game full screen.

view.html

<object id="game" src="url/file.html"></object>
<span onclick="fullScreen()"></span>

main.js

function fullScreen() {
var elem = document.getElementById("game");
if (elem.requestFullscreen) {
    elem.requestFullscreen();
    document.addEventListener('fullscreenchange', fullScreenExit, false);
} else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
    document.addEventListener('fullscreenchange', fullScreenExit, false);
} else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    document.addEventListener('mozfullscreenchange', fullScreenExit, false);
} else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
    document.addEventListener('webkitfullscreenchange', fullScreenExit, false);
}
}

The Problem

When the button fullscreen is clicked, it works fine and makes the game full screen BUT it refreshes it. So, if the user is midway in a game on level 2 and decides to go fullscreen, it restarts the game (loads the object again).

Answer 1

I guess you are experiencing this on Chrome or other Webkit/Blink browser?

They have a weird behavior regarding <object>, where they unload its content when the element is not in the document anymore (or even just with style=display:none;...

That would make sense it fires here too since the element is actually detached from the active document.

Not much you can do I guess, while you may want to file a bug report, I would strongly suggest you try from an <iframe> instead, which doesn't suffer from this few years old bug...

_{Ps: it's data="url for <object>, not src="..}