Develop Reference

How to warn user before leaving page but not on redirect

I have some pages on my site that allow users to create and edit posts. When a user is on these pages, I'd like to warn them before leaving the page. I can do that like this:
//Only warn if user is on a New or Edit page
if(window.location.href.indexOf("/new") !== -1 || window.location.href.indexOf("/edit") !== -1 {
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
//Doing this again because I don't know which version is compataible with all browsers
window.onbeforeunload = function (e) {
e.preventDefault();
e.returnValue = ''
};
};
On a New or Edit page, the information in a form gets submitted to the server using JQuery ajax. The server returns a URL which the user gets redirected to to see the results of their post/update like this window.location.href = result; with result being the URL sent back from the server.
When that code runs to do the redirect, the user is getting the warning that they are about to leave the page they are on. I don't want it to do this on any redirects/navigation that the user has not performed. How could I stop/remove the warning in this instances?
UPDATE: This is not a duplicate. This question asks about preventing a beforeunloadevent happening on a redirect where the user has not requested to move away from the page himself.

Because you may want the event bound in some circumstances but not others within the same window, you'll have to not only add the event handler to the window, but you'll have to remove it as well (under the right circumstance) because even though you are changing the URL of the document loaded in the window, you are not changing the window itself:
function handleBeforeUnload (e) {
e.preventDefault();
e.returnValue = '';
}
//Only warn if user is on a New or Edit page
if(location.href.indexOf("/new") !== -1 || location.href.indexOf("/edit") !== -1 {
window.addEventListener('beforeunload', handleBeforeUnload);
} else {
// Remove the previously registered event handler (if any)
window.removeEventListener('beforeunload', handleBeforeUnload);
}

If you want to force a navigation with window.location.href, you should disable the beforeunload event listener before you navigate.
Something like this, for example:
function unloadHandler(e) {
e.preventDefault();
e.returnValue = '';
}
window.addEventListener('beforeunload', unloadHandler);
function forceNavigation(url) {
// Remove the "are you sure you want to leave?" message, then navigate
window.removeEventListener('beforeunload', unloadHandler);
window.location.href = url;
}
Call forceNavigation('https://example.com') to navigate without warning the user.
JS fiddle here: https://jsfiddle.net/o918wsam/1/

js ecwid url redirect

I have been trying to set up redirects for a range of ecwid urls starting from /shop to /shop#!/~/ to lead to /shop#!/~/cart
I have come up with this code:
var wrong_url = ['http://example.com/shop','http://example.com/shop#','http://example.com/shop#!','http://example.com/shop#!/','http://example.com/shop#!/~','http://example.com/shop#!/~/'];
var current_url = document.URL;
for (i=0;i<wrong_url.length;i++) {
if (current_url==wrong_url[i]) {
document.location.replace('http://example.com/shop#!/~/cart');
break;
}
}
It works all right but there is a problem. When I am at /shop#!/~/cart and then manually change url to, say, /shop#!/~/ it won't get redirected until I refresh the page. I believe this has something to do with ajax behavior of ecwid shopping cart but can't figure out how to fight it.
Need help?

Vitaly from Ecwid here.
The issue in the current version of your script is that it doesn't detect the changes to the URL like you described.
So you will need to create a handler for such situations separately. For example, you can do it like this:
<script>
var wrong_url = ['http://example.com/shop','http://example.com/shop#','http://example.com/shop#!','http://example.com/shop#!/','http://example.com/shop#!/~','http://example.com/shop#!/~/'];
var current_url = document.URL;
// function to check current URL and make a redirect
function checkUrl(){
for (i=0;i<wrong_url.length;i++) {
if (current_url==wrong_url[i]) {
document.location.replace('http://example.com/shop#!/~/cart');
break;
}
}
}
// Execute checkUrl() function each time URL is changed
$(window).bind('hashchange', function() {
checkUrl();
});
// Execute checkUrl() function on initial page load
checkUrl();
</script>

Is deep linking redirect work with click/touch event generated by jquery trigger method?

Actually, I am trying to deep link from my web url to app. I have used the code from https://github.com/hampusohlsson/browser-deeplink and everything is working till checking the app installed or not. Now, the problem is that I am executing the deeplink.open() method of the said code and then as per return true/false I am trying to redirect the user to my deeplink app url. Note: I am not executing the .open() method on click event. As my page dont trigger any click event with physical touch on the screen, the code for redirecting window.location = "native/url" is not working. If i execute the code window.location = "native/url" on any button click it is working. Event I tried to generate the click event with trigger method still the window.location to redirect to native is not working. Can any please tell me whether we need to a physical touch on the screen or can we do the same with jquery trigger method?
function redirectUrl(OS, webUrl, appUrl){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
deeplink.setup({
iOS: {
appId: "ISOAPP",
appName: "facebook",
},
android: {
appId: "com.myandroid.app.dev"
},
url: {
mobileUrl: appUrl,
webUrl: webUrl
}
});
var result = deeplink.open(appUrl)
if(result == true){
//app is installed
$("#redirectButton").on("click", function() {
window.location = "mynative://home";
});
$("#redirectButton").trigger("click");
}else {
window.location = webUrl;
}
}else{
//for desktop web
window.location = webUrl;
}
}

How to reliably send tracking event on link click?

I have a tracking event (in the form of an http call to a tracking server) that fires on the clicking of a link, fired by an onclick event.
However, it appears that fairly often, the event is not registered by the tracking server because the browser cuts off the (long-running) event call when it loads the new page.
I'm reluctant to wait for a reply before forwarding the user to the new page, in case the reply is delayed and the user has to wait.
Is there a way to ensure the event call completes and forward the user on immediately?

Maybe preventDefault helps you. You don't share your code, it's because I explain you this way:
$('a.link').on('click', function(e) {
e.preventDefault();
var trackingLink = $(this).attr('href');
// do ajax stuff
$.ajax().success(function() {
window.location.href = trackingLink;
});
});
With preventDefault() you avoid links to load the page, then make the ajax requests and if it's successful redirects to the page of the link

One option is to end an 'unload' event handler, and send the data it the handler. This will delay the unload of the page.
Example:
$(window).on('unload', function() {
$.ajax({
method: "POST",
url: "serverUrl",
data: { logData: '....' }
})
});
Maybe you can use the .sendBeacon method. It's only supported by Chrome and Firefox right now, but the description from MDN seems to fit you needs:
This method addresses the needs of analytics and diagnostics code that
typically attempt to send data to a web server prior to the unloading
of the document.
Example (from the MDN article):
window.addEventListener('unload', logData, false);
function logData() {
navigator.sendBeacon("/log", analyticsData);
}

Intercept page redirect

Im scraping a website and Im trying to redirect to another website if people click on a link so I injected some javascript:
$('a').on('click', function() {
for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){
ls[i].href= 'http://mywebsite.com/test.php?url=' + this;
}
});
It works, but it only works on actual links <a href..>. Sometimes a click on an element will act as a link do to some javascript, I also would like to capture that 'event'. It has me thinking about XMLHttpRequest if I Im not mistaken the browser has a built in object called XMLHttp object, which one could use to intercept ajax calls:
(function(open) {
XMLHttpRequest.prototype.open = function(method, url, async) {
//do something...
So my question is: Does anything similar exist for listening and altering outgoing URL's?

Just so I'm clear on this, whenever somebody clicks on a link, you want to figure out what that URL is, alter it, then redirect the user to your own URL?
$('a').on('click', function(event){
event.preventDefault();
var url = $(this).attr('href');
});
preventDefault() will stop the page from redirecting.
At this point, url will be the URL string, and you can do whatever you want to it. To redirect the user, either use window.location.href or window.location.replace.
JSfiddle here
http://jsfiddle.net/JQ5qC/