Could a website force the browser to go into fullscreen mode?

Question

I want to run a psychological study for which participants have to look at large images.

The experiment is done on the web and therefore in a browser window. Is it possible to tell the browser to go into fullscreen, for example on button press?

I know there is the possibility to open a fixed-size popup window. Do you think this would be a feasable alternative? And if, what would be the best way to do it? Are there elegant ways of detecting a popup-blocker, to fallback and run the study in the original browser window.

The main concern is that the participants of this study are not familiar with technical details and should not be bothered by them.

Just found that this question has new relevance now with the introduction of HTML5 video. HTML5 video players are not able to provide a real fullscreen function. Indeed, this is a security issue. — ypnos, Feb 05 '10 at 10:40
There are many duplicates of this question: http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen — Anderson Green, Jun 03 '13 at 23:54

score 8 · Answer 1 · answered Oct 23 '08 at 03:02

8

You could just tell the user to press F11. Next to it, put a 'why?' link and explain why you feel like they need to be in fullscreen mode.

I don't think you can force a browser to go full screen and, in fact, if you were able to do that I'd be furious at my browser. It's too invasive. Even Flash has security so that forcing the plugin to go to fullscreen requires the event to originate with a user interaction. So, if it's that important to you, this might be a good reason to use the Flash plugin because you could attach the go-fullscreen call to a misleading button that says 'start quiz' (or whatever).

But, please don't do that. Just be straight forward with the user and tell them to hit F11.

EDIT: I just tried the sample code provided in another comment and I'm happy to say that Firefox opens up a maximized window with an address bar, not a fullscreen window.

answered Oct 23 '08 at 03:02

mqsoh

3,180
2
24
26

Don't worry, I want to give an optional "set me fullscreen" button. Good to know that F11 works for most browsers. – ypnos Oct 23 '08 at 03:08
4

@matt this is no longer true. Chrome 3 goes to fullscreen on F11. – itsadok Oct 20 '09 at 19:12
For Mac computers, it's something like Apple+Shift+F – Rob Mar 24 '11 at 11:30
Phones don't have an F11! – Evan Langlois Jan 25 '17 at 01:22

score 5 · Accepted Answer · answered Dec 17 '13 at 20:02

I have found some code after searching.

function fullscreen() {
    var element = document.getElementById("content");
    if (element.requestFullScreen) {
        if (!document.fullScreen) {
            element.requestFullscreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize_actual.png");
        } else {
            document.exitFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize.png");
        }

    } else if (element.mozRequestFullScreen) {

        if (!document.mozFullScreen) {
            element.mozRequestFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize_actual.png");
            google.maps.event.trigger(map, 'resize');
        } else {
            document.mozCancelFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize.png");
        }

    } else if (element.webkitRequestFullScreen) {

        if (!document.webkitIsFullScreen) {
            element.webkitRequestFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize_actual.png");
            google.maps.event.trigger(map, 'resize');
        } else {
            document.webkitCancelFullScreen();
            $(".fullscreen").attr('src',"img/icons/panel_resize.png");
        } 
    } 
}

It will use html5 api. I switch with jquery the a special picture for it. Hope that will help out. At the moment, i don't know if you can force it, 'cause it was forbitten due security.

Yes, this is the right answer today. This feature was not available when I asked. ;-) Thank you for taking your time for a late answer. You will probably get a badge for it. — ypnos, Dec 18 '13 at 00:25
@Swen, with webkitRequestFullScreen function, we can only make images shown in full screen. What if I want my whole website display in full screen mode with button click? — Ng2-Fun, Mar 04 '16 at 18:22
@Ng2-Fun You can make any element you want fullscreen. If you can't do it with "body" or "document", just wrap the whole page in a DIV and make it fullscreen. I've done it before, just can't remember how. BUT! You must do this in response to a click or gesture. You can't do it on page load, from a timer, etc. Only by user reponse. — Evan Langlois, Jan 25 '17 at 01:20

score 5 · Answer 3 · answered Oct 23 '08 at 02:58

5

There isn't a way to resize the current window to full screen, but you can open a popup in full screen:

<script type="text/javascript">
<!--
function popup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newwin=window.open(url,'windowname4', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Fullscreen popup window</a>

answered Oct 23 '08 at 02:58

Darryl Hein

142,451
95
218
261

Thank you, is there also an easy possibility to alter the original page on successful load of the popup? So that the user doesn't start the study twice in the end.. – ypnos Oct 23 '08 at 03:09
See response as another answer. – Darryl Hein Oct 23 '08 at 03:17
Is this answer still relevant in 2012 with additions in browser features? – Varun Achar Sep 06 '12 at 09:31
I think so. It's how I would do it. – Darryl Hein Sep 15 '12 at 03:38

micahwittman · Answer 4 · 2008-10-23T03:26:11.477

4

Open a new window in full screen mode on IE:

<script>
<!--
window.open("page.html","fs","fullscreen,scrollbars")
//-->
</script>

Putting in a "Close" link on page.html may be a good idea:

<a href="#" onclick="window.close()">Close Window</a>

edited Oct 23 '08 at 03:26

answered Oct 23 '08 at 03:10

micahwittman

12,356
2
32
37

score 2 · Answer 5 · answered Oct 23 '08 at 02:57

2

In the past, I've seen websites do this. However, as it's incredibly annoying and generally used by ads for pr0n websites, the technique may be blocked in recent browsers.

But I think the important point is: it's incredibly annoying and generally used by ads for pr0n websites, so you probably don't want to associate yourself which such things, so your probably best off just asking your users to maximize their browsers.

answered Oct 23 '08 at 02:57

James Curran

101,701
37
181
258

For an internal process such as this, I think it makes sense. – Darryl Hein Oct 23 '08 at 02:58
I use it only for a study where participants are invited for and they will get instructions beforehand. – ypnos Oct 23 '08 at 03:06
1

As long as it's specifically mentioned in the instructions: altering the size of the window (or anything else the user's specifically set) without the user's consent is generally not good practice. – Dave DuPlantis Oct 23 '08 at 12:51
The asker in this case isn't running a general website, but one that is for a specific purpose. Think of it as a Kiosk mode/fullscreen application. – Clay Horste Oct 10 '11 at 20:28

score 1 · Answer 6 · answered Oct 23 '08 at 03:17

1

To modify the parent window, try something like:

window.opener.location.href = '/confirmation/page.html';

answered Oct 23 '08 at 03:17

Darryl Hein

142,451
95
218
261

score 0 · Answer 7 · answered Dec 26 '13 at 10:47

0

This feature is more interesting for mobile browsers, which support fullscreen. The most mobile browser wont have an option for fullscreen by tap an option. You have a change to switch to fullscreen to get a little bit app feeling.

answered Dec 26 '13 at 10:47

Swen

124
1
4

Scottie T · Answer 8 · 2008-10-23T03:00:33.260

0

F11 takes IE and Firefox into fullscreen mode. I'm sure it's possible to go fullscreen, since YouTube and other video streaming sites can do it with Flash, but I don't know how with javascript.

edited Oct 23 '08 at 03:00

answered Oct 23 '08 at 02:55

Scottie T

11,729
10
45
59

score -1 · Answer 9 · answered Mar 13 '22 at 16:09

-1

forget java script! For app feeling put this this to your body tag or div tag or css, it will work with all browsers, except Opera:

´ :-webkit-full-screen :-moz-full-screen :-ms-fullscreen :fullscreen ´

answered Mar 13 '22 at 16:09

misterferien

1

Could a website force the browser to go into fullscreen mode?

9 Answers9

Linked

Related