A user over at Experts Exchange was looking for a way to create an Exit button of sorts that would return the user to the page that referred them to the site (i.e. if the user got to the page via Google, the link would return them to Google).
If the goal was to simply navigate back one page to return the user, the following code could be used simply to go back one page in the browser history:
|
1 |
<a href="#" onclick="history.go(-1)">Back</a> |
However, if the goal is to let the user navigate to different pages throughout the site (say two or three clicks into the site) and then return to the referring site, it can be a little more complicated. This can be solved with some simple jQuery, here is a simple example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var referralCookie = $.cookie('referralURL'); if (referralCookie == null) { referralCookie = document.referrer; $.cookie('referralURL', referralCookie, { expires: 2 }); } }); function ExitURL() { var referralCookie = $.cookie('referralURL'); $.cookie('referralURL', null); window.location.replace(referralCookie); } </script> </head> <body> <a id="exitURL" href="#" onclick="ExitURL()">Exit</a> </body> </html> |
In this example, I am using the jQuery cookie plugin found here. When the page first loads, it checks to see if a cookie already exists for the referring URL, if not it sets it. Then, when the link (or button or image) calls the ExitURL() function with the onclick, the cookie is read, deleted, and then the user is redirected back to the referring URL.
Pretty simple. Ask you have any questions :D
Thank you John, I’ll probably use this on my free web email website. It would be great if the ‘return link’ could be the title name of the referring site.
Using your suggestion of re-directing back to the referring page is a great solution, however, my current implementation contains a flaw. I have used jQuery to wrap the history.go(-1) to an id value of a form button. The $(document).ready(function () {$(‘#abc_def_ghi_jkl_mno_pqr_stu_vwxyz_diidIOSaveItem’).click(function() {
history.go(-1);});
});
fires correctly when the form’s SAVE button is clicked, however, it fires off before the form can actually save any updated data. The code is embedded into a CEWP on an EditForm.aspx page. Any ideas how to correct this issue?
really like this function to return to the referring page. Want I want to happen is for the ExitURL function to open the referring page in a new tab. How can I achieve that please?