Is there a way I can close the current browser tab with a press on the button, using reactjs?
I've tried window.close()
and self.close()
but none of the JavaScript methods seem to work.
I don't want the event of close window in React. I want to close the browser tab itself. window.close()
can be used only when window.open()
is used.
-
@MohammadMalek this event will be called when the user explicitly closes the browser tab. If i understood correctly. But i want to close the browser tab from a button click.– JohnMar 6, 2019 at 7:36
-
Because of security reasons, you can only close tabs you opened from your code, that's what the error message you pasted tells you– FerrybigMar 6, 2019 at 7:39
5 Answers
It's not allowed by the browser to close not self open tab by window.open()
so it's kind of work around and convincing the browser it's open by you
by open an empty page in the same page then close it.
You could try that
window.open("about:blank", "_self");
window.close();
-
Yeah... I thought the solution had to be a kind of trick like you mentioned, but I didn't know the exact code for opening the browser window that referred to the same window already opened indirectly by React or other file. I will try this.– Lex SoftMar 4, 2020 at 15:31
-
2This does exactly what is written above: opens an empty page in the same page and then closes the page. Only downside is that the empty page remains open (tested on Chrome 95).– HansNov 6, 2021 at 18:21
Yes there is a way and it's not related to React but it is JavaScript. You can create a function to call on button click if you want:
const closeTab = () => {
window.opener = null;
window.open("", "_self");
window.close();
};
<button onClick={closeTab}>Close Tab</button>
JavaScript can't close a window that it didn't directly open.
The script which opened the window must also be the script that closes the window. A new window isn't capable of closing itself via JavaScript. Here is an example below:
function openNewWindow() {
window.open('www.ventrane.com');
}
function closeOpenedWindow() {
window.close();
}
To open the page on a new tab, remove the self from window.open("", "_self");
The final answer is without opening a tab, you can't close it using window.close(). I have searched everywhere, so, I come up with a trick. if you are using reactjs hooks, just open the same url in same tab using useEffect like this-
useEffect(() => {
window.open("https://xyz.abc/", "_self", "");
console.log("open window");
}, []);
Then make function of close and add onclick to close() which has window.close();
This will definitely work! Tried and Tested.
-
-
useEffect will cause window.open to run indefinitely since useEffect, even with [] dependency will be called everytime the window is loaded, no? This is what' im experiencing right now with your example Mar 1, 2021 at 7:38
-
-
i tot it's pretty obvious it's a loop codesandbox.io/s/sad-bhaskara-pikd2?file=/src/App.js Mar 1, 2021 at 8:10
-
try this, codesandbox.io/s/hopeful-thompson-x90rq?file=/src/App.js but locally, because it won't close on sandbox, so, when you run npm start, and then click on button, it will close. Mar 2, 2021 at 6:11