I want to create a link on a webpage that would close the currently active tab in a browser without closing other tabs in the browser. When the user clicks the close link, an alert message should appear asking the user to confirm with two buttons, "YES" and "NO". If the user clicks "YES", close that page and If "NO", do nothing.
How can it be done? Any suggestions?
You will need Javascript to do this. Use window.close():
close();
Note: the current tab is implied. This is equivalent:
window.close();
or you can specify a different window.
So:
function close_window() {
if (confirm("Close Window?")) {
close();
}
}
with HTML:
close
or:
close
You return false here to prevent the default behavior for the event. Otherwise the browser will attempt to go to that URL (which it obviously isn't).
Now the options on the window.confirm() dialog box will be OK and Cancel (not Yes and No). If you really want Yes and No you'll need to create some kind of modal Javascript dialog box.
Note: there is browser-specific differences with the above. If you opened the window with Javascript (via window.open()) then you are allowed to close the window with javascript. Firefox disallows you from closing other windows. I believe IE will ask the user for confirmation. Other browsers may vary.
Try this
close
This method works in Chrome and IE:
<a href="blablabla" onclick="setTimeout(function(){var ww = window.open(window.location, '_self'); ww.close(); }, 1000);">
If you click on this the window will be closed after 1000ms
</a>
As far as I can tell, it no longer is possible in Chrome or FireFox. It may still be possible in IE (at least pre-Edge).
Sorry for necroposting this, but I recently implemented a locally hosted site that had needed the ability to close the current browser tab and found some interesting workarounds that are not well documented anywhere I could find, so took it on myself to do so.
Note: These workarounds were done with a locally hosted site in mind, and (with the exception of Edge) require the browser to be specifically configured, so would not be ideal for publicly hosted sites.
Context:
In the past, the jQuery script window.close() was able to close the current tab without a problem on most browsers. However, most modern browsers no longer support this script, potentially for security reasons.
Current Functionality:
window.close() will work on tabs opened by a script, or by an anchor with target="_blank" (opened in a new tab)
See #killstreet's comment on #calios's answer
Browser Specific work-arounds:
Google Chrome:
Chrome does not allow the window.close() script to be to be run and nothing happens if you try to use it. By using the Chrome plugin TamperMonkey however we can use the window.close() method if you include the // #grant window.close in the UserScript header of TamperMonkey.
For example, my script (which is triggered when a button with id = 'close_page' is clicked and if 'yes' is pressed on the browser popup) looks like:
// ==UserScript==
// #name Close Tab Script
// #namespace http://tampermonkey.net/
// #version 1.0
// #description Closes current tab when triggered
// #author Mackey Johnstone
// #match http://localhost/index.php
// #grant window.close
// #require http://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==
(function() {
'use strict';
$("#close_page").click(function() {
var confirm_result = confirm("Are you sure you want to quit?");
if (confirm_result == true) {
window.close();
}
});
})();
Note: This solution can only close the tab if it is NOT the last tab open however. So effectively, it cannot close the tab if it would cause window to closes by being the last tab open.
Firefox:
Firefox has an advanced setting that you can enable to allow scripts to close windows, effectively enabling the window.close() method. To enable this setting go to about:config then search and find the dom.allow_scripts_to_close_windows preference and switch it from false to true.
This allows you to use the window.close() method directly in your jQuery file as you would any other script.
For example, this script works perfectly with the preference set to true:
<script>
$("#close_page").click(function() {
var confirm_result = confirm("Are you sure you want to quit?");
if (confirm_result == true) {
window.close();
}
});
</script>
This works much better than the Chrome workaround as it allows the user to close the current tab even if it is the only tab open, and doesn't require a third party plugin. The one downside however is that it also enables this script to be run by different websites (not just the one you are intending it to use on) so could potentially be a security hazard, although I cant imagine closing the current tab being particularly dangerous.
Edge:
Disappointingly Edge actually performed the best out of all 3 browsers I tried, and worked with the window.close() method without requiring any configuration. When the window.close() script is run, an additional popup alerts you that the page is trying to close the current tab and asks if you want to continue.
Edit:
This was on the old version of Edge not based on chromium. I have not tested it, but imagine it will act similarly to Chrome on chromium based versions
Final Note: The solutions for both Chrome and Firefox are workarounds for something that the browsers intentionally disabled, potentially for security reasons. They also both require the user to configure their browsers up to be compatible before hand, so would likely not be viable for sites intended for public use, but are ideal for locally hosted solutions like mine.
It is possible. I searched the whole net for this, but once when i took one of microsoft's survey, I finally got the answer.
try this:
window.top.close();
this will close the current tab for you.
The following works for me in Chrome 41:
function leave() {
var myWindow = window.open("", "_self");
myWindow.document.write("");
setTimeout (function() {myWindow.close();},1000);
}
I've tried several ideas for FF including opening an actual web-page, but nothing seems to work. As far as I understand, any browser will close a tab or window with xxx.close() if it was really opened by JS, but FF, at least, cannot be duped into closing a tab by opening new content inside that tab.
That makes sense when you think about it - a user may well not want JS closing a tab or window that has useful history.
Try this as well. Working for me on all three major browsers.
<!-- saved from url=(0014)about:internet -->
<a href="#" onclick="javascript:window.close();opener.window.focus();" >Close Window</a>
window.close() doesn't work in 2k21 because Scripts may close only the windows that were opened by them.
BUT if the tab is opened in the browser not manually, but automatically - then window.close() works.
Automatically (when close() works):
<a href="/close" target="_blank"> the browser will open address in the new tab and this tab can be closed with close()
when new browser tab is opened from another application (when you click a link in Telegram/Whatsup/Outlook etc) - OS will open new tab and it can be closed with close()
when you open the with window.open('ya.ru') - for sure it can be closed with close()
Manually (when it doesn't work):
when you open fresh browser and type in the address.
when you click (+) to open new tab and type in the address
Tested successfully in FF 18 and Chrome 24:
Insert in head:
<script>
function closeWindow() {
window.open('','_parent','');
window.close();
}
</script>
HTML:
Close Window
Credits go to Marcos J. Drake.
As for the people who are still visiting this page, you are only allowed to close a tab that is opened by a script OR by using the anchor tag of HTML with target _blank. Both those can be closed using the
<script>
window.close();
</script>
<button class="closeButton" style="cursor: pointer" onclick="window.close();">Close Window</button>
this did the work for me
a bit late but this is what i found out...
window.close() will only work (IE is an exception) if the window that you are trying to close() was opened by a script using window.open() method.
!(please see the comment of #killstreet below about anchor tag with target _blank)
TLDR: chrome & firefox allow to close them.
you will get console error:
Scripts may not close windows that were not opened by script.
as an error and nothing else.
you could add a unique parameter in the URL to know if the page was opened from a script (like time) - but its just a hack and not a native functionality and will fail in some cases.
i couldn't find any way to know if the page was opened from a open() or not,
and close will not throw and errors.
this will NOT print "test":
try{
window.close();
}
catch (e){
console.log("text");
}
you can read in MDN more about the close() function
It is guaranteed that the closing of tabs will not be tolerated in any future browsers. Using scripts like mentioned above will not work.
My solution was to use a Chrome Extension. A Chrome Extension can require tab manipulation permissions so it will be easy to handle the closing of any tab from the domain in which the extension's content script is active.
This is how the background script should look like:
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
console.log(sender)
console.log(message)
if(message.closeThis) {
closeTab(sender.tab.id)
}
});
const closeTab = id => {
console.log("Closing tab");
chrome.tabs.remove(id);
}
The content script should look like this:
window.addEventListener("message", (event) => {
// Only accept messages from ourselves
if (event.source !== window)
return;
if (event.data.type && (event.data.type === "APPLICATION/CLOSE")) {
console.log("Content script received APPLICATION/CLOSE event");
chrome.runtime.sendMessage({closeThis: true});
}
}, false);
Close the tab by calling this in your application (make sure the content scripts are enabled in your domain by specifying that in the manifest):
window.postMessage({ type: "APPLICATION/CLOSE" }, "*");
Be cautious when using this because Chrome Extensions' deployment can be a pain.
I just wanted to add that window.close() works in 2021, chrome 91, but not always. One of the cases when it works if there is no history in tab (you can't go back).
In my case I wanted to create self-destructing tab which closes after few seconds, but I was struggling with how to go to development server avoiding new tab, because apparently New tab is also tab and it is being saved in tab history :D I created link in about:blank tab with target=_blank attribute and it was leading to new tab where window.close() method finally worked!
This is one way of solving the same, declare a JavaScript function like this
<script>
function Exit() {
var x=confirm('Are You sure want to exit:');
if(x) window.close();
}
</script>
Add the following line to the HTML to call the function using a <button>
<button name='closeIt' onClick="Exit()" >Click to exit </Button>
You can try this solution to trick the browser to close the current window using JavaScript + HTML:
JS:
function closeWindow() {
if(window.confirm('Are you sure?')) {
window.alert('Closing window')
window.open('', '_self')
window.close()
}
else {
alert('Cancelled!')
}
}
HTML:
Some content
<button onclick='closeWindow()'>Close Current Window!</button>
More content
Due to strict browser behaviors, window.close() will only work if it's opened by window.open(...)
But I made a solution for this!
Add an empty hashtag with window.open(...) when it is NOT included
When the perfect time for closing occurs, call window.close
If 2. has returned an error, replace any hashtag or HTTP parameters with an empty hashtag and finally close the window
<button onclick="myFunction()">Close</button>
<script>
if (location.href.indexOf("#") == -1) {
window.open(location.href + "#", "_self")
}
function myFunction() {
try {
window.close()
} catch (err) {
window.open(location.href.substring(0, location.href.indexOf("?")).substring(0, location.href.indexOf("#")) + "#", "_self")
window.close()
}
}
</script>
Type close in this live demo
Here's how you would create such a link:
close
I'm trying to show a confirmation pop before user close the tab or went to another tab like facebook, gmail, GoDaddy & others do.
My code working for Firefox but not for other browser like chrome, safari etc.
<script type="text/javascript">
var hook = true;
window.onbeforeunload = function() {
if (hook) {
return "Did you save"
}
}
function unhook() {
hook=false;
}
</script>
Call unhook() onClick for button and links
No Block URL
Please help me to get this fixed.
If you take a look at the api of window.beforeunload(), you can see that, though widely the basic unload event is supported, a custom message can only be set in internet explorer and certain versions of some browsers. So just use the normal standard message.
This feature (custom messages) was often exploited by malicous sites to interact with user in a harmful or malipulative way. This is why many browsers don't support this anymore, until some patch removes the threat for users.
Standard message solution:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
Look at Ouibounce it helps detect when a user is about to leave the page(It looks at the position of the cursor). You could probably build off this library.
I'm trying to redirect user's of my mobile webapp to use Chrome rather than Safari. I tried using the following:
<script>
javascript:location.href="googlechrome"+location.href.substring(4);
</script>
However this constantly opens tabs in Chrome in a loop. Do you know how I can successfully do this?
Cheers,
Dara
This will cause the page to open every time the webpage is loaded, regardless if you are in Safari or Chrome. This is also very poor User Experience to just forward the user to another browser without their input.
It would be better to have some way for the user to open your site in Chrome and also to have an explanation why it is needed.
There are other schemes for https and callbacks: https://developer.chrome.com/multidevice/ios/links#uri_schemes
<p>This webapp is best viewed in Google Chrome</p>
<button type="button" onclick="openInChrome()">Open in Chrome</button>
<script>
var openInChrome = function() {
if (/^((?!Chrome).)*(Safari)+.*$/.test(navigator.userAgent)) {
var protocol = location.href.substring(0,location.href.indexOf(':'));
var url = location.href.substring(location.href.indexOf(':'));
if (protocol === "http") {
location.href = "googlechrome" + url;
}
else {
location.href = "googlechromes" + url;
}
}
}
</script>
Edit:
Added a check to verify they are in Safari.
Well, the reason is pretty obvious; Chrome is instructed to open Chrome too. You just want a userAgent conditional.
if (navigator.userAgent.indexOf("CriOS") == -1) {
location.href="googlechrome"+location.href.substring(4);
}
I would go on my standard rant about user agent checking being bad, but I trust what you're saying about this being a private webapp. Since iOS doesn't let you change your default browser, I guess this is a fair workaround.
I'm required to make a website function exactly the same on other browsers as it does in IE6. Part of the current code looks similar to this:
<script>
function myFunc(){
location.href="mailto:test#test.com&body=Hello!";
location.href="newPage.html";
}
</script>
<body onload="myFunc();">
</body>
in IE, this causes the mail client to open with the specified message prepared, and then redirects the browser to newPage.html. Other browsers, however, only redirect to newPage.html. How can I achieve this effect (opening the mail client and then doing a page redirect) consistently across browsers?
As a note, I've also tried to accomplish this using meta refresh, but was unsuccessful.
Try using something like:
send
Instead of at the onload.
Changing the href property will start a location load, changing it again afterwards will cancel the previous navigation.
It appears that IE6 will start the e-mail client immediately upon setting the property, then continue the javascript execution. Other browsers appear to do things differently, and the second location load will cancel the first.
I managed to work around this in Chrome with a timer, it might work for other browsers too:
function myFunc(){
location.href="mailto:test#test.com&body=Hello!";
window.setTimeout(function () { location.href="newPage.html" }, 0);
}
On the whole, I tend to think security settings will get in your way and would recommend just giving the user a boring old-fashioned mailto link to click. (Edit: Perhaps one set up like Mic suggests.)
That said, I wonder if things become any more reliable if you introduce a delay:
function myFunc() {
location.href = "mailto:test#test.com&body=Hello!";
setTimeout(function() {
location.href = "newPage.html";
}, 500);
}
This will work only if the client's browser knows which E-Mail client to open for mailto: links in the first place. If the user uses a web-based client that is not registered with the browser, nothing will happen.
Also, it could be that security settings prevent mailto: links from opening programmatically, or will prevent it in the future.
I wouldn't rely on this to work either way, only as a nice optional convenience function.
Anyway, to answer your question, can you try setting a timeout between the two calls? Maybe the location refresh is just too quick for the browser to catch up.
location.href="mailto:test#test.com&body=Hello!";
setTimeout(function(){ location.href = 'newPage.html' }, 500);
function redirect() {
setTimeout(function() {
location.href = "index.html";
}, 1000);
}
I'm using the following JavaScript code:
<script language="JavaScript1.2" type="text/javascript">
function CreateBookmarkLink(title, url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,"");
} else if( window.external ) {
window.external.AddFavorite( url, title); }
else if(window.opera && window.print) {
return true; }
}
</script>
This will create a bookmark for Firefox and IE. But the link for Firefox will show up in the sidepanel of the browser, instead of being displayed in the main screen. I personally find this very annoying and am looking for a better solution. It is of course possible to edit the bookmark manually to have it not show up in the side panel, but that requires extra steps. I just want to be able to have people bookmark a page (that has a lot of GET information in the URL which is used to build a certain scheme) the easy way.
I'm afraid that it might not be possible to have Firefox present the page in the main screen at all (as Googling this subject resulted in practically nothing worth using), but I might have missed something. If anyone has an idea if this is possible, or if there's a workaround, I'd love to hear about it.
For Firefox no need to set any JavaScript for the bookmark an page by script, only an anchor tag with title and rel="sidebar" can do this functionality
Bookmark This Page
I have tested it on FF9 and its working fine.
When you click on the link, Firefox will open an dialog box New Bookmark and if you wish to not load this bookmark on side bar then un-check Load this bookmark in the sidebar from dialog box.
I think that's the only solution for Firefox... I have a better function for that action, it works even for Opera and shows a message for other "unsupported" browsers.
<script type="text/javascript">
function addBookmark(url,name){
if(window.sidebar && window.sidebar.addPanel) {
window.sidebar.addPanel(name,url,''); //obsolete from FF 23.
} else if(window.opera && window.print) {
var e=document.createElement('a');
e.setAttribute('href',url);
e.setAttribute('title',name);
e.setAttribute('rel','sidebar');
e.click();
} else if(window.external) {
try {
window.external.AddFavorite(url,name);
}
catch(e){}
}
else
alert("To add our website to your bookmarks use CTRL+D on Windows and Linux and Command+D on the Mac.");
}
</script>
You have a special case for
if (window.sidebar)
and then a branch for 'else' - wouldn't firefox land in the first branch and hence only add the panel?
Hojou,
It seems that is the only way to add a bookmark for Firefox. So FF needs to land in the first branch to have anything happening at all. I Googled some more but I'm really getting the idea this is impossible to properly address in FF...