CODEWITHSUNDEEP
html5-fullscreen
Seph Reed
Seph Reed

Reputation: 10878

Old JS Fullscreen code no longer working. "requestFullscreen is not a function" error

EDIT: An answer is accepted below, but for anyone who ends up in my position, the main issue was that firefox temporarily enabled full-screen-api.unprefix by default, and then changed that in an update so that a prefix was once again necessary. Also, if you search about:config for "fullscreen" it won't show "full-screen-api."

Some code I have been using for a long time to fullscreen webpages using js no longer works.

I've checked the mdn (https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen) and nothing appears to have changed, but for some reason I can no longer full screen a website in any of my browsers (I've tested Chrome, Firefox, and Firefox Developer Edition).

Further, the error I'm given is not one of permissions, but that requestFullscreen does not appear to exist as a function.

TypeError: document.body.requestFullscreen is not a function

Is something big going on that I just don't know about? Is this perhaps related to my OS? It's very odd that old code (document.body.requestFullscreen()) which worked in all my browsers no more than 6 months ago now works in none.

Also, I've tested it where I use it most and fullscreen does still work for things like youtube or the built in bits <video> tags.

#test {
  height: 100px;
  width: 100px;
  background: orange;
}
<button onclick="document.body.requestFullscreen()">Fullscreen document.body</button>

<button onclick="document.documentElement.requestFullscreen()">Fullscreen document.documentElement</button>

<button onclick="document.documentElement.requestFullscreen()">Fullscreen Test Div</button>

<div id="test">Test Div</div>

Upvotes: 1

Views: 23006

Answers (3)

Quentin
Quentin

Reputation: 943108

Update: Three years later and the feature is no longer experimental. Prefixes are only needed for Internet Explorer and Safari in 2020.

As per the browser support section of the MDN documentation:

This is an experimental feature.

Chrome only supports it with the webkit prefix. Firefox only supports it if you turn on the full-screen-api.unprefix.enabled preference in the browser. Internet Explorer only supports it with the ms prefix.

Upvotes: 4

Ivo Krushkov
Ivo Krushkov

Reputation: 11

I hope this will be helpful to someone.

So I was having an issue with the fullscreen function on a website I am working on (svejen.ikbugu.com) .

For me, the IE and Chrome fullscreen was working, but Firefox not. No errors were thrown out and the function was executing well under 1 sec ( somewhere I read that if over 1 sec., firefox prevents the fullscreen request from executing). I also had the request with and without the vendor specific prefixes, so that was not it.

What worked for me was to paste the javascript directly into the html as opposed to have it stored in a separate file. Now it works perfectly.

I thought this might help someone else who is having the same issue... Greetings.

Upvotes: 0

Jasper Kinoti
Jasper Kinoti

Reputation: 499

Here is an example of implementing the vendor-prefixed fullscreen api requests:

function toggleFullScreen() {
    // Get your full screen element
    const video= document.querySelector('.player');
    const rfs = video.requestFullscreen || video.webkitRequestFullScreen || video.mozRequestFullScreen || video.msRequestFullscreen;
    rfs.call(video);
}

addEventListener for'click' on your button:

const fullscreenBtn = player.querySelector('.fullscreen-btn');
fullscreenBtn.addEventListener('click', toggleFullScreen);

Upvotes: 2

Related Questions