Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript window.open ignores 'top' and 'left' parameters; how do I fix this

I am converting a page that uses multiple "alert" popups to use secondary windows so I can control the size and location and so the css will will work. What happens is that window.open() third parameter contains the position and size of the popup.
The size part works as expected BUT the "top=" and "left=" can be anything and the new window will always open in the upper left corner of the terminal screen, not in the browser window.
Some of the other values work but some don’t; eg the location bar always appears even when it is set to "location=no"

I have reviewed many similar questions but none of the answers seem relevant.

In trying to eliminate things like parent markup as the culprit I created a minimalist function that will always open in the upper left corner about 1/2" in from the edge of the terminal screen:

<!DOCTYPE html>
<head>
  <script type="text/javascript" "language=javascript">
    var popwin = null;

    function newwin() {
      popwin = window.open("", "", "top=500,left=2000,height=600,width=400,titlebar=no,scrollbar=yes,location=no,popup=yes");
      popwin.document.write("XXXXX");

      console.log("top=" + window.screenY + ", left=" + window.screenX);
    }
  </script>
</head>
<body>
  <center>
    <p>test page for popup window</p>
  </center>
  <br /> <br />
  <center><button onClick="newwin()">Click to open window</button></center>
  <br /> <br />
</body>
</html>

The console log shows top=23 left=26 which is pretty much what I see. I need to be able to open the window over the existing primary window in the application so the old/new data can be compared.
The document.write function is only there to prove that this is the window that I am actually seeing on the screen.

Tags:

2

Answers


  1. 0

    There are a number of issues here. First, of all, the values you use in your example (top=500,left=2000,height=600,width=400) are likely to put at least part of the window off screen. This will be automatically corrected by the browser. As MDN notes:

    Requested position (top, left), and requested dimension (width,
    height) values in windowFeatures will be corrected if any of such
    requested value does not allow the entire browser popup to be rendered
    within the work area for applications of the user’s operating system.
    In other words, no part of the new popup can be initially positioned
    offscreen.

    Secondly, in the code where you are checking the position, you’re actually reporting the main window’s position, not the popup’s. Instead of:

    console.log("top=" + window.screenY + ", left=" + window.screenX);

    That should be:

    console.log("top=" + popwin.screenY + ", left=" + popwin.screenX);

    This example correctly positions and reports the position of a popup window:

    <!DOCTYPE html>
<head>
  <script type="text/javascript">
    function popup() {
      const popwin = window.open(
        "", 
        "", 
        "top=300,left=300,height=40,width=400,titlebar=no,popup=yes"
      );  
      popwin.document.write(`top=${popwin.screenY}, left=${popwin.screenX}`);
    }   
    popup();
  </script>
</head>
<body>
</body>
</html>

    Lastly, concerning the address bar: it is in most modern browsers no longer possible to open a popup window without displaying the address bar, for security reasons. See more info in this answer.

    In conclusion, there are better alternatives than using popups. They annoy users, and are routinely blocked by browsers. Depending on your use case, you could use something like a dialog element.

    Login or Signup to reply.
  2. 0

    Try this code:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Popup Test</title>
    </head>
    <body>
        <center>
            <p>test page for popup window</p>
        </center>
        <br />
        <br />
        <center><button onClick="newwin()">Click to open window</button></center>
        <br />
        <br />
        <script type="text/javascript">
            var popwin = null;

            function newwin() {
                // Get the current window position
                var top = window.screenY + 100;
                var left = window.screenX + 100;

                // Open a new window at the calculated position
                popwin = window.open(
                    "",
                    "",
                    `top=${top},left=${left},height=600,width=400,titlebar=no,scrollbars=yes,location=no`
                );
                popwin.document.write("<p>XXXXX</p>");

                console.log("top=" + top + ", left=" + left);
            }
        </script>
    </body>
</html>

    This will correctly adjust the position of the new window

    Make sure to adjust values as per your requirements

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search