onbeforeunload not working - tried everything - javascript

I have tried a lot of things for onbeforeunload and came up with a solution-
window.addEventListener("beforeunload", function(e) {
(e || window.event).returnValue = null;
return null;
});
This seems to work when i navigate away from the current page inside the application, but its not working for which it is intended that is on browser close. i want this to work only on browser close and not on navigating by clicking on other links inside the application. Any leads will be appretiated. Thanks in advance.

Related

Not able to detect back, refresh and close events in on (IOS) apple phone browser

We already have code to detect back, refresh and close events in our web application.
window.addEventListener("beforeunload", function (e) {
(e || window.event).returnValue = "";
return "";
});
We are displaying a save changes pop-up before the user clicks on back, refresh, or closes the browser. This is working perfectly fine in most of the web and mobile browsers except in the apple phone browser. How can we achieve the above functionality in the apple phone browser?
I have also tried the pagehide event for the apple phone browser, but it only detects the close event, not back and refresh. Also, the save changes pop-up is not displayed.
window.addEventListener("pagehide", function (e) {
(e || window.event).returnValue = "";
return "";
});
Any help is appreciated, or any other alternative solution would be helpful. Thanks in advance.
not sure about refresh. But for detecting back you can use this:
window.history.pushState(null, "", window.location.href);
window.onpopstate = function() {
//back button clicked
};

React, Detect if user is going to leave the current page

Hello and thank you for your time!
I was learning by following a React course: https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents
And it looks like the React Router API has changed a lot since the course was filmed.
In the course it is taught how to use willTransitionFrom and willTransitionTo which both look like they are deprecated:https://github.com/ReactTraining/react-router/issues/1388
I would like to follow along, and I have tried to do the detect if the user is going to leave the current page. I have done:
window.addEventListener('beforeunload', (event) => {
if (!(window.confirm("DO YOU really want to exit a fun page like this?"))) {
event.preventDefault();
}
});
And also:
window.onbeforeunload = (event) => {
if (!(window.confirm("DO YOU really want to exit a fun page like this?"))) {
event.preventDefault();
}
};
It looks like neither of them gets fired, because I would like to show the confirm dialog when you try to load another page.
I have read:
How to check if user is refreshing the page or navigating to other page
How to display a pop up, when a user tries to leave the current page?
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
Thank you for your help.
Try this one (picked from https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload)
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
return confirmationMessage; // Gecko, WebKit, Chrome <34
});

iOS not loading target click URL bc of hover?

I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.

location.href in IE & Edge

Having issues getting my one page web application to work in Internet Explorer and Edge. It works perfectly fine in other browsers.
The issue that I'm having is that I can't seem to get the navigation to work.
I've tried the following:
location.href = '#quickQuiz'
location.href = '/#quickQuiz'
window.location.href = '#quickQuiz'
window.location.href = '/#quickQuiz'
document.location.href = '/#quickQuiz'
document.location.href = '#quickQuiz'
function goHere(where) { window.location = where; return false; }
location.hash = '#quickQuiz'
location.hash = '/#quickQuiz'
All of them works perfectly fine on other browsers. What am I doing wrong?
http://www.snabbteori.se if you wanna see it for yourself.
EDIT1: Additional code
The item in my navigation menu looks like the following:
<li data-icon="info"><a id="teoriNav">Teori</a></li>
And then I check for a click event on it. I know that it's possible to just put href="#teori in there, but I am just using this one as an example, there are other links where I need to perform AJAX calls too, this one doesn't need it though just to verify there isn't something wrong with my AJAX calls causing it.
$(document).delegate('#teoriNav', 'click', function () {
location.hash('#teori');');
});
I've also tried this but doesn't work:
$('#teoriNav').click( function() {
location.hash('#teori');
});
EDIT2: Updates
I believe I've fixed all jQuery errors and some other issues. The only thing I'm getting in the Internet Explorer console is:
HTML1300: Navigation occured.
DOM7011: The code on this page disabled back and forward caching.
And then when I click on the button I get output which I wrote which confirms it registers my click on the button. But still it won't navigate.
EDIT3: Ugly temporary fix
It works after doing a page reload after navigating.
var isIE = /*#cc_on!#*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
if(isEdge || isIE)
location.reload();
But I hate the fact that the site has to reload, and if someone has a real fix for this I would really appreciate it...
Edge has an issue with links if your code is not propper. You should check your console for any errors, This is most likely.
We will need more information from your side to help you further.
Post your HTML and your Javascript (just relating to this area of problem)
and we can then better help you.
I sagest fixing your jQuery errors first and trying again.
Ok my Browser test have given me a variation of 30-60 error relating to jQuery across Mac to Win. These will need to be addressed.
You also have a XSS issue that needs to be resolved. You have HTTPS from facebook but then HTTP on your website, These will need to match.

iOS Safari Mobile doesn't trigger pageshow firing only once

The iOS Safari doesnt't seem to trigger pageshow event in the following situation.
Lets say I have 3 pages
Page A : (has some code code on pageshow event)
Page B
Page C
User navigates from A -> B. Presses the back button. (pageshow triggers fine)
User then navigates to another page could be Page B or Page C. Then presses the back button again. (pageshow doesn't trigger)
On the contrary if the user minimizes and maximizes the window again or switches to another window and back (by pressing the middle button on iPhone) the pageshow event is triggered again.
Everything seems to work fine on Android
window.onpageshow = function(e) {
alert('hello');
}
Did anyone else face it? I spent hours on this thing and couldn't think of a workaround.
Any help would be greatly appreciated.
Hack : This is what worked for me
var myCustomEvent = (navigator.userAgent.match('iPhone') != null) ? 'popstate' : 'pageshow';
$(window).on(myCustomEvent, function(e) {
...
}
For some reason popstate triggers everytime when page state changes in iOS but not in Android.
Try using:
window.onpageshow = function(event) {
if (!event.persisted) {
alert("hello");
}
};
Persisted is false on initial page load, so you can check against it, and if it false, it is your first page load.
The popstate event doesn't seem to work any more, at least for me. I worked out some third-party script on my page was breaking this, but wasn't able to work out which one. I came up with this hack:
addEventListener('pageshow', () => {
history.replaceState({}, document.title, window.location.pathname);
// called on initial load and first back
});
addEventListener('popstate', () => {
// called on all back events
});

Categories