Javascript popup - Works in FF & Chrome, fails in IE - javascript

I can't seem to figure out why the following simple popup will not work in IE9. FF & Chrome popup as expected, but IE does not appear to do anything when the link is clicked. I tried the IE9 debugger, but didn't get any helpful information out of it.
In the head section:
<script type="text/javascript" language="JavaScript">
function JSPopup(linkref) {
window.open(linkref,"Report Definitions","width=600,height=480");
return false;
}
In the body:
<strong>Report Definitions</strong>
Thanks for your help,
Filip

Turns out the problem was the name given to the popup - IE doesn't allow spaces, FF & Chrome do:
window.open(linkref,"Report Definitions","width=600,height=480");
needed to be changed to:
window.open(linkref,"ReportDefinitions","width=600,height=480");
This works across browsers.
Filip

This is part of the security changes made in IE6. Now you can only call "window.open" from within a user-initiated event. For example, your code would work inside an element's onclick event. The "window.open" http://msdn.microsoft.com/en-us/library/ms536651(VS.85).aspx MSDN page says this:
"This method must use a user-initiated action, such as clicking on a link or tabbing to a link and pressing enter, to open a pop-up window. The Pop-up Blocker feature in Internet Explorer 6 blocks windows that are opened without being initiated by the user."
Example...
function popUpWin(url,wtitle,wprop){
if (!window.open){ return; } // checking if we can't do this basic function
// Kill if(win), since win was a local var this was a usless check
var win = window.open(url,wtitle,wprop);
// next line important in case you open multiple with the same 'wtitle'
// to make sure the window is reused and refocused.
if (win && win.focus){ win.focus(); }
return false;
}

Related

how to close browser tab using js? [duplicate]

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

onBeforeUnload before any interaction with the DOM [duplicate]

When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
      It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
NOT all browsers support this (more info in the Browser compatibility section on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
Chrome removed support for custom message in ver 51
Opera removed support for custom message in ver 38
Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
Safari removed support for custom message in ver 9.1
When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
Chrome: version 51
Firefox: version 44
Safari: version 9
Edge: it has never been possible
Opera: version 38
For details see:
https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me and I'll take you home
I just made a div appear that shows a message in the background.
It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
checkout browser compatibility
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}

Not able to show my own message on beforeunload event [duplicate]

When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
      It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
NOT all browsers support this (more info in the Browser compatibility section on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
Chrome removed support for custom message in ver 51
Opera removed support for custom message in ver 38
Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
Safari removed support for custom message in ver 9.1
When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
Chrome: version 51
Firefox: version 44
Safari: version 9
Edge: it has never been possible
Opera: version 38
For details see:
https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me and I'll take you home
I just made a div appear that shows a message in the background.
It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
checkout browser compatibility
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}

window.onbeforeunload is not working in Firefox [duplicate]

When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
      It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
NOT all browsers support this (more info in the Browser compatibility section on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
Chrome removed support for custom message in ver 51
Opera removed support for custom message in ver 38
Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
Safari removed support for custom message in ver 9.1
When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
Chrome: version 51
Firefox: version 44
Safari: version 9
Edge: it has never been possible
Opera: version 38
For details see:
https://www.chromestatus.com/feature/5349061406228480
https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me and I'll take you home
I just made a div appear that shows a message in the background.
It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
checkout browser compatibility
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}

TinyMCE and IE 9 Issue

I have TinyMCE 4.0 in the page and when I select the text and try to paste it via CTRL+V, I get an error message saying that "Clipboard access not possible." This happens in IE8/9. However the same works fine in Chrome. Is there any workaround for this to get this working in IE?
Bounty:
I've tried resetting all IE settings (via Internet Options->Advanced->Reset All...) on two different computers, both running IE9, and one has the problem while the other does not.
Ultimately, I need to be able to paste formatted text (often with bullets or numeric lists and such) into TinyMCE and have it format them correctly. For this, I'm using the paste plugin, which seems to be throwing the error.
It seems to me that you're using an older TinyMCE 4 version, so in my opinion you should first do an upgrade to the latest version (4.0.3).
I've checked the source code of such version and I've found no trace of the Clipboard access not possible error message, which seems instead to be present in an earlier version of the tinymce/plugins/paste/plugin.min.js file, and only for Internet Explorer:
e.ie ? o.on("init", function () {
var e = o.dom;
o.dom.bind(o.getBody(), "paste", function (n) {
var r;
if (n.preventDefault(), a() && e.doc.dataTransfer)
return c(e.doc.dataTransfer.getData("Text")), t;
var i = u();
e.bind(i, "paste", function (e) {
e.stopPropagation(), r = !0
});
var s = o.selection.getRng(),
f = e.doc.body.createTextRange();
if (f.moveToElementText(i.firstChild), f.execCommand("Paste"), d(), !r)
return o.windowManager.alert("Clipboard access not possible."), t;
var p = i.firstChild.innerHTML;
o.selection.setRng(s), l(p)
})
}
Not being able to find an unminified version of this script, I can't say why such code fails, nor can I explain why it works only on one of your's computers.
In Internet Explorer's Tools menu, choose Internet Options.
Click the Security tab.
Click Trusted Sites.
Click the Sites... button.
Type your domain name (for example, widgetdesigns.com) in the first field, then click Add.
Unselect the checkbox that says Require server verification (https:) for all sites in this zone.
Click OK to apply your change.
Back on the Security tab, confirm that Trusted Sites is still selected, then click the Custom Level button.
Scroll down the Security section (near the bottom) and check the Disable box below Allow Programmatic clipboard access. (Checking this box will disable the access alert only for sites in your Trusted Sites list.)
Click OK then OK again to apply your changes.
What about this? Does this work?

Categories