0

So I am building an app for a client in jQuery, this is placed in an IFrame on their website. This app reads data from a JSON that is generated by their CMS and then sets page layouts etc from a query string.

The client me to set a cookie of the last visited page when linked off to an external page. Then on coming back to the app it will check if a cookie has been set, if so then redirect to that last visited page.

I am using https://github.com/carhartl/jquery-cookie plugin for easier cookie integration.

My code so far:

//Get current URL
var complete_url = document.URL;

//Define last location cookie
var last_location = $.cookie('last_location');

//On page read set last_location as current location
$(document).ready(function() {
    $.cookie('last_location', complete_url, {
        expires: 0,
        path: '/'
    });
});

//if page_location is set navigate to that location
if (last_location && last_location != complete_url) {
    window.location = last_location;
}

This obviously doesn't work as you'd get stuck in an infinite loop and I am struggling to get this right as it is my first day back at work from Christmas, ha.

If you are able to help that would be great!

Also I'm sorry if this is unclear I can try and reword it if need be.

Thanks.

[NOT SOLVED]

var pattern = new RegExp(window.location.host);

$('a').click(function() {
    var href = $(this).attr('href');
    if(pattern.test(href) !== true) {
        $.cookie('last_location', document.URL, {
            expires: 7,
            path: '/'
        });
    }
});

var referrer = window.parent.document.referrer,
    current = document.domain;

if(referrer.indexOf(current) === -1) {
    var last_location = $.cookie('last_location'),
        current_location = document.URL;

    if(typeof last_location !== 'undefined' && last_location !== current_location) {
        $.removeCookie('last_location');
        window.location = last_location;
    }
}

[NEW SOLUTION]
I have come up with a new solution that doesn't depend on the document.referrer

var last_location = $.cookie('last_location'),
    current_location = document.URL;

//Initial check if cookie is set and not equal to current location
if (last_location && last_location !== current_location) {
    window.location = last_location;
}

//Set pattern
var pattern = new RegExp(window.location.host);

//On any link click test if the href does not have a match with the pattern
$('a').click(function() {
    var href = $(this).attr('href');
    if (pattern.test(href) !== true) {
        //If no match found, the link is external and adding current url to the cookies
        $.cookie('last_location', document.URL, {
            expires: 1,
            path: '/'
        });
    } else {
        //Else if link is internal remove cookie and continue as normal
        $.removeCookie('last_location', {
            path: '/'
        });
    }
});
Levi Cole
  • 3,561
  • 1
  • 21
  • 36
  • Why would this end in an infinite loop ? – Lorenz Meyer Jan 05 '15 at 11:43
  • @LorenzMeyer this would end in an infinite loop because every time the page is loaded it sets the last_location cookie as the current page and then on navigating to another page within the app it would read the cookie and redirect to the last page but also set the cookie to the page you just navigated to.. this would just keep going on and on. Am I correct or just over thinking this? Thanks. – Levi Cole Jan 05 '15 at 11:49

1 Answers1

1

I would set the cookie when the user is linked off to an external page and not everytime he visit a page of your client's website. So I put an event listener to this links.

$('.your_external_links').on('click', function(evt){
    $.cookie('last_location', document.URL, {
        expires: 7, // Please read the [NOTE_1]
        path: '/'
    }
}

[NOTE_1]

Reading the documentation of the cookie plugin, the expire section says:

expires

Define lifetime of the cookie. Value can be a Number which will be interpreted as days from time of creation or a Date object. If omitted, the cookie becomes a session cookie. So if you want that cookie never expire put a big number inside of this. For example: "expires: 9999"

[END NOTE_1]

Then when the user comes back I'll check if he comes from an outside link. If so I'll check also the cookie and redirect the user to the last location visited.

var comesFromUrl  = document.referrer,
    mySiteDomain = document.domain;

// Check if user comes from an external domain
if(comesFromUrl.indexOf(mySiteDomain) === -1) {
    var last_location    = $.cookie('last_location'),
        current_location = document.URL;

    // Check if cookie exists and if its value is not the current location
    if(typeof last_location !== "undefined"
       && last_location !== current_location) {
        // Here is possible to choose if remove the cookie or refresh it. It's up to you.
        $.removeCookie('last_location');
        window.location = last_location;
    }
}
Nico Vignola
  • 479
  • 8
  • 16
  • I have had to tweak your code because the external links are coming from the clients CMS WYSIWYG so asking them to add a class isn't reliable solution for me. To fix this I've added a "link scanner" to add a class to the external links. See edit! – Levi Cole Jan 05 '15 at 14:30
  • 1
    In this case there are two good solution. First solution is yours, the "link scanner". Second solution, you can check the href attribute when the user click on anchor so you don't have to go in each anchor node. P.S. Please, if my answer helped you, accept it. Thanks. – Nico Vignola Jan 05 '15 at 14:40
  • Thank you for your help, I have accepted your answer. I have added my amended solution to the question. I had to change the comesFromUrl variable as the app is within an IFrame. The fix was easy.. window.parent.document.referrer – Levi Cole Jan 05 '15 at 15:47
  • One issue I'm finding with this.. It doesn't work with the browsers navigation buttons (forward, back). I have done some research and there is know easy way to get the back/forward referrer.. So back to the drawing board. – Levi Cole Jan 06 '15 at 10:36
  • 2
    Possible solution [here](http://stackoverflow.com/questions/11379411/how-can-i-detect-the-back-forwards-buttons-being-clicked-when-using-history-js) – Nico Vignola Jan 13 '15 at 14:13