Javascript "Go Back" link which shows the url if there is any

Question

I want to put a "Go Back" link in my website inner pages. the code which I can simply use is :

<script>document.write('<a href="#" onClick="history.go(-1); return:false;"></a>')</script>

but it doesn't show the url of the previous page when someone hovers on it, and also it won't work if there is no previous page(like when you open a link in a new tab). So I need a code which only appears when there is a previous page and also shows the url. I appreciate if anybody knows a good way ..

hmm, it's just an example, I meant using history.go(-1) won't show the url .. — Payam Shakibafar, Feb 05 '13 at 08:32

score 2 · Answer 1 · edited May 23 '17 at 12:34

2

document.referrer is my suggestion.

Make a hidden div and place link in that div.

<div id="NavBack">//hide it
    <a>link here</a>
</div>

On document load, check whether something like 'Previous URL' exists or not. If it does then show #NavBack which has the link that can navigate back or just keep it hidden. Refer this

I have updated answer with the patch of code to give you hint.

<div id="NavBack" style="display:none;">
    <a id='test'>link here</a>
</div>
<script type="text/javascript">
if(document.referrer!=''){
    var a = document.getElementById("test");
    a.href=document.referrer;
    document.getElementById("NavBack").style.display='block';
}
</script>

I have used above code and it has worked perfectly. Though, let me make it clear that this is not the standard way, this is just to give you the idea that i want to tell you. Please use jquery instead of javascript and do not give inline CSS in your project.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 05 '13 at 08:40

Bhavik Shah

2,300
1
17
32

`` , will it show the url even if it's been a blank link ? ( I'm not sure about the syntax ) – Payam Shakibafar Feb 05 '13 at 08:57
Please try to understand. The div in which this anchor tag will be placed is hidden by default and will be made visible only if document.referrer is not null. So, when document.referrer will be null, the div will be hidden and so will be anchor tag. – Bhavik Shah Feb 05 '13 at 09:38
dude, I understood that!! take a look at my question again. I have 2 problems, 1-to show the link only if there is a back link 2- show the link location on hover !! you helped me with the first issue and thanks for that. now I want the link location to be shown on the bottom left of the browser when someone hovers on the link ... – Payam Shakibafar Feb 05 '13 at 10:05
I have 2 html files, index.html & single.html, I have put the link of single.html in index.html, then I click on it and go to the single.html. with this code, the 'back' link should refer to index.html right? but it doesn't ... – Payam Shakibafar Feb 05 '13 at 11:21
can you please put the code in question? Because, i have tested it and it has worked. have you tried to alert document.referer on single.html? – Bhavik Shah Feb 05 '13 at 11:25

score 0 · Answer 2 · answered Feb 05 '13 at 08:32

0

You can use the history object as describe at the MDN

var h = window.history;
hSize = h.length; // is there any history
h.back();

Also check browser support for these methods.

answered Feb 05 '13 at 08:32

Édouard Lopez

40,270
28
126
178

;-) two answers, same reference linked; I guess MDN is a good hint. – feeela Feb 05 '13 at 08:34
Actually it is, but Web Platform provide additional information : http://docs.webplatform.org/wiki/dom/history – Édouard Lopez Feb 05 '13 at 08:39

score 0 · Answer 3 · answered Feb 05 '13 at 08:33

You have to check if there are history entries using window.history.length. If it is greater than zero insert the link.

Javascript "Go Back" link which shows the url if there is any

3 Answers3