在新窗口中加载网页时，全屏模式不起作用

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