How to close current tab in a browser window?

javascript

window-close

user-confirmation

custom-modal

byNikita Barsukov·Aug 8, 2024

Close a script-initiated tab using JavaScript's window.close() function. This gives browsers a break from handling unwanted closures:

<button onclick="window.close()">Close Tab</button>

Do remember that user-opened tabs are like stubborn mules, they simply don't close due to this method.

For an added layer of user consent, integrate a confirmation dialog using window.confirm(). Because, who doesn't like second chances?

function closeTab() {
  if (window.confirm("Are you getting tired of this tab?")) { // Polite check
    window.close(); // Adios, tab!
  }
}

<button onclick="closeTab()">Close Tab</button>

Understanding browser behavior

User confirmation step

Invoke a confirmation dialog as a safeguard to avoid accidental tab closure:

if (window.confirm("Close this tab?")) { // Gentle reminder
    window.close(); // The tab's destiny fulfilled
}

It's like asking, "Are you sure?" before doing something irreversible.

Browser-specific quirks

Browsers are like picky diners—each has its own preferences:

Firefox: Won't let scripts play around with tabs not created by them.
Chrome: For window.close(), it's an "all or none" deal: if the tab isn't the last open, it's a go!
Edge: No fuss here, window.close() is natively supported.
Internet Explorer: Grandpa IE is quite laid-back with window.close(), but always worth a check.

Chrome fans can try the TamperMonkey plugin with a UserScript header for a VIP pass:

// ==UserScript==
// @grant window.close
// ==/UserScript==
// TamperMonkey doing the tough job!

Firefox config tweaks

For Firefox, one workaround is tinkering with about:config settings to enable window.close(). But remember, with great power, comes great responsibility!

For local apps

For local apps, window.close() can take a breather from the usual web security restrictions.

Moving beyond 'confirm' boxes

The humble confirm() can be superseded by a more stylish custom modal dialog:

// Bring your own dialog box
showCustomModal({
  title: "Confirm Closure",
  message: "Sure about closing this tab?",
  onConfirm: function() {
    window.close(); // The axe drops here
  }
});
// "Good looks and functionality can coexist" - Custom modal dialogs

Covering all bases

Alternatives to direct closure

When window.close() throws tantrums, think on your feet with some of these techniques:

Redirection: Guide the user to a safe page or back home.
Visibility control: Hide what you don't want to be seen.
Communication: Break the news about the tab closure functionality being "on a break".

All this, while keeping the tab casually open.

Harnessing the power of script-opened tabs

Tricky, but by using window.open() you become the master of your tab's destiny:

let newTab = window.open('/myPage', '_blank'); // Open sesame!
newTab.close(); // Abracadabra, close!

Balancing functionality and security

As Spiderman says, "with great power comes great responsibility". Be wary of opening Pandora's box of security risks while drafting workarounds.

explain-codes / Javascript / How to close current tab in a browser window?

Linked

How to open a URL in a new Tab using JavaScript or jQuery?



Detect browser or tab closing



How to Remove the Close Button on the jQuery UI Dialog?



Javascript: location.href to open in new window/tab?



Open a URL in a new tab (and not a new window)



Make a link open a new window (not tab)



How to programmatically close a JFrame?



Understanding browser behavior Moving beyond 'confirm' boxes Covering all bases