Javascript change link destination

Question

I am trying to make a javascript that goes makes <a> go to another link, rather than the one specified in its href. E.g. I want

<a href="http://www.example.com/some-page">

To go to instead:

http://www.newexamplesite.com/http:%252F%252Fwww.example.com%252Fsome-page

Unfortunately I don't have access to jQuery for this application. Has to be pure javascript.

I'm looking for some javascript that can be included within the actual <a> tag:

<a onclick="" href="http://www.example.com/some-page">

Note that the original link has to be detected and all / is needed to be replaced with %252F

What is wrong with `http://www.example.com/some-page`? This way your users can also check the bottom of their browser so they know where they are actually going. You should not redirect users to a different site that you claim though. — Swiffy, Dec 21 '15 at 14:14
I understand. But in this case I'm developing an API and in some cases webmasters may not have the knowledge to change their links using PHP on the server side. — Amy Neville, Dec 21 '15 at 14:17
See this answer: http://stackoverflow.com/a/28016553/2680216 — Josh Crozier, Dec 21 '15 at 14:22
That's jQuery. I can't guarantee that webmasters will be using that. And it's not ethical to force them to load jQuery just for something like this. — Amy Neville, Dec 21 '15 at 14:27

Saeed Seyfi · Accepted Answer · 2015-12-21T14:43:02.297

2

Try this:

<a onclick="window.location.href = 'http://newlink.com/' + encodeURIComponent(this.href); return false;" href="http://www.example.com/some-page/">Go to new link</a>

edited Dec 21 '15 at 14:43

answered Dec 21 '15 at 14:42

Saeed Seyfi

637
5
18

Thanks, I changed it to double-encode the forward slash. This is because the server prematurely decodes %2F to / and routes it to the wrong destination. By double-encoding to %252F I prevent that issue. I'm using it for GET applications. – Amy Neville Dec 21 '15 at 14:50

nicael · Answer 2 · 2015-12-21T14:29:14.627

0

You should prevent a default event (i.e. going to the link specified by href) and go to another link.

<a onclick="event.preventDefault();location.href='http://www.newexamplesite.com/'+this.href.replace(/\//g,'%252F')"
   href="http://www.example.com/some-page">
   test
</a>

edited Dec 21 '15 at 14:29

answered Dec 21 '15 at 14:16

nicael

18,550
13
57
90

(Edited to add the "lookup for the original link") – nicael Dec 21 '15 at 14:32

David Wilkinson · Answer 3 · 2015-12-21T14:22:33.983

0

Try the following:

<a onclick="event.preventDefault();location.href='http://www.uol.com.br/'" href="http://www.example.com/some-page">Link Text</a>

The event.preventDefault should stop the anchor element's default behaivour (ie - directing the user to the site within the a href.

EDIT: forgot parentheses on function call!

edited Dec 21 '15 at 14:22

answered Dec 21 '15 at 14:19

David Wilkinson

5,060
1
18
32

I was typing my original answer as yours came up it would appear - I wouldn't post a duplicate answer on purpose. Thanks and fixed - forgot the parentheses on the preventDefault() function. – David Wilkinson Dec 21 '15 at 14:23
I agree that it should be preventDefault. There is a lookup of the original link though also to be made. – Amy Neville Dec 21 '15 at 14:26

score -1 · Answer 4 · answered Dec 21 '15 at 14:27

You can replace the href URL with a function call like this:

<a href="javascript:goToLink()" />
<script>
 function goToLink(){
  // your link selection logic goes here
      .....

// when you have selected the link you want to go to assign it to the window location.href attribute and the browser will redirect the user to the specified link
window.location.href = "..selected link...";
}
</script>

Javascript change link destination

4 Answers4