Page exit via hyperlink not being catched by onberforeunload - javascript

I have an onberforeunload method which is correctly alerting the user when they are trying to close the tab or the browser using the follwoing code:
window.onbeforeunload = function(event) {
event.returnValue = 'Are you sure you want to leave/';
console.log(event.returnValue);
};
I have discovered that the onberforeunload is not being called when I click a hyperlink on the page. The warning message I want to display isn't appearing and the page is loading freely.
I have searched for many ways to create a popup for when a hyperlink has been selected but they all deal with one or groups of hyperlinks in div tags. I wish for a popup to display if any hyperlink is selected.
Why isn't onbeforeunload catching the exiting of the page through a hyperlink? Is my understanding of onbeforeunload wrong that it should be catching hyperlink exits?
UPDATE
I have updated the code to the following:
window.onbeforeunload = closeIT;
function closeIT() {
return 'here';
if(searchOnGoing){
return 'Ifs you leave the Youtube History page now the application will not finish';
}
};
It is still not working for hyperlinks and working for browser and tab closure. I am running this as part of a content script in a chrome extension which is injecting the content script into the page. Would this have an effect on it?
I also have an onunload following,i am wondering would this also have an effect on it?
window.onunload = function(event){
//Do something
}

Actually, it should trigger. Do you catch the event somehow via a click-event-listener? Anyway, you could show an alert with help of a click-event listener.
Following code-snippet is copied from a similar question: how to detect if a link was clicked when window.onbeforeunload is triggered?
Here the question was, in contrast, how to prevent the beforeunload event when links are clicked.
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}

The following snippet correctly uses onbeforeunload.
<body onbeforeunload="return myFunction()">
Click me!
<script>
function myFunction() {
return "Please don't go!\nThis works beautifully!";
}
</script>

Related

onbeforeunload event functioning

I have a requirement where when we close the tab or close the browser I need to perform some processes. When user will close the tab, there should be no popup getting displayed. I should be able to directly trigger the Leave button of the popup. The code which I am using sometimes work and sometimes not. Is it possible to close the tab or browser without popup or the popup is mandatory. Please advise. Below is my code :-
Without Popup(sometimes work and sometimes not)
window.onbeforeunload = function() {
//debugger;
perform();
};
//With this i get a popup which I don't want
window.addEventListener("beforeunload", function (e) {
perform();
(e || window.event).returnValue = null;
return null;
});

windows onbeforeunload doesn't work Javascript

I want to prevent a close tab or close browser in a web page.
I am using this code:
<script type="text/javascript">
window.onbeforeunload = function(e) { //Doesn't work well
return 'Exit';
};
$('#form').submit(function() { //No alert on submit form (this works)
window.onbeforeunload = null;
});
</script>
If I click somewhere in the page the code works fine and ask me if I really want to close the page, but if I reload the page and then I close the tab without click something in the page the tab close without show any alert.
Do you have some idea how to fix?

triggering multiple events with single onClick

I have a iframe on my web page. On anchor click a pdf file opens in the iframe. I have provided button by clicking which I close/display:none the iframe. I want the iframe to show again when the anchor is clicked. The click of the anchor should show the iframe and open the pdf in that iframe. Please help me how to do that.
I have tried the following:
function CloseWindow() {
var ifr = document.getElementById("ifrlyric")
ifr.style.display='none' }
function OpenWindow() {
var ifro = document.getElememtById("ifrlyric")
if (ifro.style.display=='none') { ifro.style.display='block' } }
Mypage
The anchor is opening the pdf in the iframe first time and the click button hides it. But again when the anchor is clicked the iframe is not showing.
Try to do a third function such as
function toggleState() {
if(document.getElementById('ifrlyric').style.display == 'none') {
window.lyrics.location='mypage.pdf'; // And I suggest moving this to OpenWindow
OpenWindow ();
} else {
CloseWindow ();
}
}
And then call it in your onClick :
Mypage
EDIT
Re-reading your code I can see a typo, you wrote getElememtById instead of getElementById
The function "OpenWindow" has the only mission to show the iframe, so I suggest to simply:
function OpenWindow() {
var ifro = document.getElememtById("ifrlyric")
ifro.style.display='block' }
Since you tagged jquery, I'll say just use the jquery toggle function:
Mypage
<script>
function setLocation() {
window.lyrics.location='mypage.pdf';
$('#ifrlyric').toggle();
</script>
You didn't post enough code for me to know if this is exactly right, but it should at least be pretty close.

javascript's unload and beforeunload alternative

I need to monitor when the user moves away from a page (to a different site not the same site) or closes the window/tab. I can achieve that with $(window).bind('unload', function() {}); but onload is a catch-all event: it also catches page refresh and navigating to a different page on the same website. How can I detect those two events (page refresh and navigating to another page in the same website) using javascript/jQuery please?
I think that isn't possible, I don't know such an event.
A possible solution is to compare the current url with the destination url but that's not possible because of security and privacy reasons see:
How can i get the destination url in javascript onbeforeunload event?
On each page,
var leaving = true;
$(function() {
$('a[rel!=ext]').click(function () { leaving = false; });
$('form').submit(function () { leaving = false; });
});
$(function() { window.onbeforeunload = unloadPage; });
function unloadPage() {
if(leaving) {
// Put your logic here
}
}
Then just make sure that all links to external sites have a rel="ext" attribute.

Stop window.event with Javascript window.confirm?

I am trying to have a confirm box come up when the viewer tries to close the window, that allows the user to stay on the current page (by click Cancel), or continue closing the window (by click OK).
My code is as follows...
<script>
function confirm_exit(){
var message = window.confirm("My message.");
if (message == true) {
// Output when OK is clicked
window.close();
} else {
// Output when CANCEL is clicked
???????
}
}
</script>
I am not sure because either one I click closes the window. I need Cancel to remain at the current page, and OK to close the window or proceed with the users window.event.
Hope this makes sense.
Courtesy of a certain website with a dash in it's name:
window.onbeforeunload = leaveConfirm;
function leaveConfirm() {
var leaveThePageMessage = 'Are you sure you want to leave this page?';
return leaveThePageMessage;
}​
This should work in all browsers (except for Opera).
Try:
window.onbeforeunload = function()
{
return confirm('Are you sure you want to close?');
}

Categories