Unable to Close Child Window Inside setTimeout Callback in JavaScript

Question

I'm encountering an issue with closing a child window inside a setTimeout callback in JavaScript. Despite successfully opening the child window using window.open, I am unable to access the newChild variable within the setTimeout callback function.

Here's a simplified version of the code I'm working with:

import { useState } from "react";

const useButton = () => {
  const openChildWindow = () => {
    const newChild = window.open(
      "https://www.google.com/",
      "",
      "toolbar=0,status=0,width=626,height=436"
    );

    setTimeout(() => {
      newChild.close();
    }, 3000);
  };

  return {
    openChildWindow,
  };
};

I'm perplexed as to why the newChild variable is not accessible within the setTimeout callback. Could someone please enlighten me on why this is happening and suggest a solution to fix this issue?

Thank you in advance for your assistance!

I suspect you can access it, what is the error in your devtools console? Try something less security concious than google.com and you'll find it's probably OK. — A Haworth
– A Haworth, Commented Jun 6, 2024 at 17:07
newChild.close(); is out of scope inside the setTImeout function thus does not exist inside there. i.e. that openChildWindow runs and ends before the setTimeout runs — Mark Schultheiss
– Mark Schultheiss, Commented Jun 6, 2024 at 18:15
@MarkSchultheiss that is not my experience. The new window is still there and is closable - as long as it is prepared to be closed (which google.com isn't, but other websites may be.) — A Haworth
– A Haworth, Commented Jun 6, 2024 at 18:29
@AHaworth Fair enough; I was testing in a snippet and forgot that this site blocks these (value is null if you console.log(newChild) in the function before the close; It may also be the case if a site is blocked inside a firewall for example. — Mark Schultheiss
– Mark Schultheiss, Commented Jun 6, 2024 at 18:46

Ray Wallace · Accepted Answer · 2024-06-06 17:18:45Z

1

Your code works fine the way it is. The problem you are seeing, is that https://www.google.com/ is preventing the window from closing.

Try your code with other urls and see. The two I tested that worked fine are:

answered Jun 6, 2024 at 17:18

Ray Wallace

2,4191 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shailender999 · Accepted Answer · 2024-06-06 16:48:03Z

There can be couple of issues for this.

However the most common issue is that the new opened window is not of the same origin.

The window.open after successfully opening a new window returns a proxy object for new window. We can use this object to control the new window only if same-origin-policy (both the window are on same origin) is satisfied.

I tried and tested the code on stackoverflow page Steps done:

Open Chrome
Navigate to stackoverflow.com
Open Dev tools and it console section add below code:

const newChild = window.open(
      "https://stackoverflow.com/",
      "",
      "toolbar=0,status=0,width=626,height=436"
    );
    console.log("newchild value : ", newChild);
    setTimeout(() => {
        console.log(newChild.close);
      newChild.close();
    }, 3000);

A new window will open. and after 3 second, it will automatically close

Shanthi B · Accepted Answer · 2024-06-06 17:20:36Z

I have tried to reproduce the issue above and came to know that, you have returned openChildWindow inside the useButton component. Basically there is no need to window component. because the window.open() will open a browser interface, i have updated the code below you can copy and try it in codeSandbox.

function App() {
  const UseButton = () => {
    const newChild = window.open(
      "https://stackoverflow.com/",
      "",
      "toolbar=0,status=0,width=626,height=436",
    );

    if (newChild) {
      setTimeout(() => {
        if (!newChild.closed) {
          newChild.close();
        }
      }, 3000);
    } else {
      console.log("Failed to open child window. Pop-up blocked?");
    }
  };

  return (
    <>
      <button onClick={UseButton}>UseButton</button>
    </>
  );
}

export default App;

Collectives™ on Stack Overflow

Unable to Close Child Window Inside setTimeout Callback in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related