Close window which opened another window

Dear experts

I have the following code and I need that the button close the window, however this not work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="/index.html">MI Pagina</a> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script language="javascript" type="text/javascript">
        function windowClose() {
        window.open('','_parent','');
        window.close();
        }
        </script>  
</head>
<BODY style="background-color:rgb(247, 247, 247)">
    <h3>Haga clic en el siguiente botón para cerrar el navegador!</h3>
    <!-- <input type="submit" value="Cerrar" onclick="javascript:window.close()"> -->
    <input type="button" value="Cerrar la ventana" onclick="windowClose();">
</body>
</html>

According to mentioned Developer site only the window which opened another window can close this.

So you already have your answer. You cannot close a window you did not open yourself.

Hi Thallius

Exist some solution workaround for this?

No. I’m afraid not. It would be a security risk if a browser allowed scripts to close arbitrary windows. Such a restriction as this exists to prevent malicious websites from disrupting user sessions or closing important tabs without user consent.

The closest you are going to get is to open the new window from within your existing window. For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Main Page</title>
  </head>
  <body>
    <p>Click the button to open a new window</p>
    <button id="openWindowButton">Open Window</button>

    <script>
      const openWindow = () => {
        const newWindow = window.open("", "newWindow", "width=300,height=200");

        newWindow.document.write(`
          <html>
            <head>
              <title>New Window</title>
            </head>
            <body>
              <p>Click the button to close this window</p>
              <button id="closeWindowButton">Close Window</button>
            </body>
          </html>
        `);

        newWindow.document.close();

        newWindow.addEventListener('DOMContentLoaded', () => {
          const closeButton = newWindow.document.getElementById('closeButton');
          newWindow.addEventListener('click', () => {
            newWindow.close();
          });
        });
      };

      document.addEventListener('DOMContentLoaded', () => {
        const openButton = document.getElementById('openWindowButton');
        openButton.addEventListener('click', openWindow);
      });
    </script>
  </body>
</html>

Bear in mind that depending on browser settings, this might open as a new tab, not a popup. It also relies on the user to instigate the action.

If this approach solves your problem, you could also consider moving the code for the new window into a file of its own.

To be clear…
Based on their opening post, the intent is, with some user interaction (button click), open a new window and close this window.

Is… there a reason a simple href navigation change is not the correct solution to this? Why do we need to open a new window just to close this one?

That said; window.close() only works in two circumstances:

  • The window in question was created by a window.open call;
  • The window in question is a top level window with a single history entry.

HTML code is fired from a configuration in SAP application, which opens a new window, and what is required is that this new window has a close button to close the window that was opened, but this is what I see that due to restriction of JavaScript cannot be done

Regards

James

Appear this resulted when execute the page

Maybe something is being escaped by whatever system you are using?

Does copy/pasting the demo I provided into a single HTML file work?

Hi James

I have copied pasted the demo that you provided into a single HTML file and generate the error

Regards

Bizarre, I just did the same and it works fine. Which browser are you using?

Hi Jame
This now show
image
However the not close not close the pages

Give this a try:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Main Page</title>
  </head>

  <body>
    <p>Click the button to open a new window</p>
    <button id="openWindowButton">Open Window</button>

    <script>
      const openWindow = () => {
        const newWindow = window.open("", "newWindow", "width=300,height=200");
        newWindow.document.write(`
          <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>New Window</title>
            </head>
            <body>
              <p>Click the button to close the opener window</p>
              <button id="closeOpenerButton">Close Window</button>

              <script>
                const closeButton = document.getElementById('closeOpenerButton');
                closeButton.addEventListener('click', () => {
                  if (window.opener) window.opener.close();
                });
              <\/script>
            </body>
          </html>
        `);

        newWindow.document.close();
      };

      document.addEventListener('DOMContentLoaded', () => {
        const openButton = document.getElementById('openWindowButton');
        openButton.addEventListener('click', openWindow);
      });
    </script>
  </body>
</html>

After re-reading your original post (thanks Marc) I realized that I had the order of what should be opened and closed round the wrong way.

I’m afraid I don’t have Edge to test, but this works as expected on FF and Chrome.

Hi James

This now open a new windows, with the button “Close windows” . When i press this button, the window preview is closed but the window that have the button “Close windows” follow.

I just found a laptop with Edge (latest version).

When you open the main page in Edge, there is a button to create a new window.

If you hit that button, a new window opens, and this new window has a button to close the main page.

If you hit that second button, the main page is closed, but the new window stays open.

Are you seeing something different?

Hi James I am seeing the same.

My question now , How can get that the window with the botton close when also press the button close=?

Regards

Like this :grinning:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Main Page</title>
  </head>

  <body>
    <p>Click the button to open a new window</p>
    <button id="openWindowButton">Open Window</button>

    <script>
      const openWindow = () => {
        const newWindow = window.open("", "newWindow", "width=300,height=200");
        newWindow.document.write(`
          <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>New Window</title>
            </head>
            <body>
              <p>Click the button to close the opener window</p>
              <button id="closeOpenerButton">Close Window</button>

              <script>
                const closeButton = document.getElementById('closeOpenerButton');
                closeButton.addEventListener('click', () => {
                  if (window.opener) window.opener.close();
                  window.close();
                });
              <\/script>
            </body>
          </html>
        `);

        newWindow.document.close();
      };

      document.addEventListener('DOMContentLoaded', () => {
        const openButton = document.getElementById('openWindowButton');
        openButton.addEventListener('click', openWindow);
      });
    </script>
  </body>
</html>

Thank you James.

What course of Udemy recommend of JavaScript?

Excelent solution!

Regards

No problem. I’m glad that worked for you :grinning:

I’m not sure I would recommend Udemy. From what I hear, they don’t review the quality of their courses.

If you want to learn JavaScript and like video learning, I would recommend Beginner JavaScript by Wes Bos.

1 Like