Full Screen mode not working while loading the web page in a new window

Question

I used the following code segment to move from A.aspx web page to B.aspx web page and I need to load the B.aspx page in full screen mode in a separate window. I am able to load the content on a separate window but unable to make it to display in full screen. The window just appears to the half of the screen

Response.Redirect("B.aspx", "", "fullscreen=yes");

I have tried it with the ScriptManager as well but again I am facing the same problem. Following is the code segment.

string url = "B.aspx";
ScriptManager.RegisterStartupScript(this, typeof(string), "OPEN_WINDOW", "window.open(' " + url + "', '', 'fullscreen=yes,resizable=no,scrollbars=yes,toolbar=no,menubar=no,status=yes' );", true); 

I have also tried setting the width and height of the window and got the same output!

Note: The problem occurs on Google Chrome and Microsoft Edge browsers. When I run the program on Firefox, the page got loaded in full screen. Is this a browser problem or is there any way to achieve this where it is compatible with all the browsers?

Answer 1

There are several mistakes and recommendations here:

1) Response.Redirect() method only accept a maximum of 2 parameters, therefore you cannot use fullscreen=yes as third parameter.

2) fullscreen=yes as window.open() parameter only works for IE (and older Firefox), but not all versions supported (MDN reference). You need to use browser specific APIs on the target page instead.

Hence, as mentioned before, you should add a function to call fullscreen API depending on the client browser:

function fullScreenMode(element) {
    if(element.requestFullscreen)
        element.requestFullscreen();
    else if(element.mozRequestFullScreen)
        element.mozRequestFullScreen();
    else if(element.webkitRequestFullscreen)
        element.webkitRequestFullscreen();
    else if(element.msRequestFullscreen)
        element.msRequestFullscreen();
}

Then modify RegisterStartupScript like this:

ScriptManager.RegisterStartupScript(this, typeof(string), "OPEN_WINDOW", 
              "window.open('" + url + @"', '', 'resizable=no,scrollbars=yes,toolbar=no,menubar=no,status=yes' );", true);

And call fullScreenMode(document.documentElement) function on the target page when user triggering certain DOM event, because some browsers put limitations to prevent pop-up window abuse in similar way to window.open() function.

Related issue:

How to open a web page automatically in full screen mode

Setting the whole window to be fullscreen in recent browsers