What works, what doesn’t, in a nutshell
Photo by Nathan Fertig on UnsplashHow can I close a window with JavaScript?
It’s interesting how often this question comes up. It can be answered very quickly. As the MDN says,
Scripts may not close windows that were not opened by script
What does this statement really say?
First: Opening and Closing Windows.
Windows are opened with
window.open[]; — full syntax here
Windows are closed with
window.close[]; — full syntax here
[but not always!]
This is where the MDN statement comes into play. A simple example should clear this up.
Example:
I’ve created two pages, Page1.html [the parent window] and Page2.html [the child window.]
Since I did not specify the size of the window, it will open as a new tab in the browser. This all works for popup windows as well.
The JavaScript functions are to,
- Close the child window.
- Close the parent. Hmm.
Running the example
Run Page1.html and click “Open child”. A child window opens as separate window as a tab.
Child opens as a tabGo back to the parent and click “Close child” and the child window closes. Viola!
Now, on the
parent, click “Close me”. Nothing happened. Bummer!
Actually something did happen. I tried to close it two ways. window.close[] and self.close[]. See the console.log[];
So a window can’t close itself.
Hold on just a minute!
According to the MDN it can close itself, under the right conditions.
Add the following button and closeMe[] function to Page2.html [child.]
Additions to childRunning the example
Run Page1.html and click “Open child”. A child window opens as separate window as a tab, just as before.
Now click the “Close me” in the child. It closes. Viola!
That window closed itself. Observations below.
Conclusion:
- Since we opened the child using a script, and had a reference handle to that child [in the variable “child”], by the MDN statement, we were able to close it using the handle to the window.close[]; [child.close[];]
- Since the parent was not opened with window.open[]; it cannot be closed using window.close[] or self.close[].
- Since the child window was opened with script, window.open[]; it can close itself.
So the statement,
Scripts may not close windows that were not opened by script.
Makes more sense now.
I hope this simple example has cleared a few thing up.
Thanks for reading!
Hold on. One last comment.
If the parent is refreshed, it loses the reference to the child and the parent cannot close the child. Help!
Try it
- Open Page1.html and click “Open child”.
- Refresh the parent, Page1.html and click “close Child”, fail!
Solution
You will notice I had a variable called “childname”. If we store that on the page, we can use it to get a reference again!
Below, in Page1.html, I added a text field [could be a hidden field], removed the closeMe[] function since that was an epic fail! and modified the closeChild[] function to look and see if the reference was lost. If so, use the window’s name stored on the form.
Observe closeChild[]Running the Example
- Open Page1.html and click “Open child”, then click “Close child”. Still works.
- Open Page1.html and click “Open child”. Refresh Page1.html, click “Close child” on Page1.html. Child closes. Yay!
Happy coding!
JavaScript provides a variety of methods to perform any operation on a web page effectively. The window.open[] method is used to open a tab in the browser. Moreover, the window.close[] method can be employed to close the window utilizing JavaScript. That window is already opened by the user in the URL. Table of Contents
- How to Use the window.close[] Method in JavaScript?
- About the author
- How do you close a website using JavaScript?
- How do I close a current window?
- How do I close the current tab in JavaScript?
- How do you close a command in HTML?
This post demonstrates the working and usage of the window.close[] method to close the window with JavaScript that is already opened by a URL.
How to Use the window.close[] Method in JavaScript?
In JavaScript, the window.close[] method is utilized for closing the window that has already been opened by the window.open[] method. The working of the window.close[] method is described using the following syntax:
Syntax
The window.close[] method does not take any parameter, it just closes the existing open tab in the browser.
Note: Some of the browsers do not support the window.close[] method if the window.open[] method is not employed first to open any webpage.
For a better understanding, the following lines of code are implemented to close windows with the built-in methods of JavaScript.
Code
An example of Window close[] method
Press the button to open Linuxhint site
Open Linuxhint
Press the button to close Linuxhint site
Close Linuxhint
var newWindow;
function windowOpen[] {
newWindow = window.open[
"//linuxhint.com/declare-variables-different-ways-javascript/",
"_blank", "width=400, height=250"]; }
function windowClose[] {
newWindow.close[]; }
In the above code:
- two buttons Open Linuxhint and Close Linuxhint are created.
- These buttons are associated with the windowOpen[] and windowClose[] methods to open and close the window tab.
- URL is provided in the code to access a webpage.
Output
The output shows the execution of the window.close[] method in JavaScript. The link is opened using the “Open Linuxhint” button. When the “Close Linuxhint” button is pressed, the window is closed.
Conclusion
The window.close[] method can be used to close a window by utilizing JavaScript that is already opened by a URL. Most of the time, the window.close[] method works with the window.open[] method. For a better understanding, we have provided a detailed working and usage of the window.close[] method alongside. In the provided example, the window is opened first, and then it is closed using the window.close[] method in JavaScript.
I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.
How do you close a website using JavaScript?
Simply call window. close[] and it will close the current window.
How do I close a current window?
Click Close Current Window on the File menu to close the active debugging information window. This command is equivalent to pressing CTRL+F4. You can also close a debugging information window by clicking the Close button in the upper-right corner of the information window inside the WinDbg window.
How do I close the current tab in JavaScript?
You will need Javascript to do this. Use window. close[] : close[];
How do you close a command in HTML?
Basic steps: using tags The closing tag normally contains a "/" before the directive to indicate the termination of the action. HTML tags are not case-sensitive, although URLs generally are. In most cases [with the exception of preformatted text] HTML collapses many spaces to one space and does not read blank lines.