JavaScript changes a href link url based on user's IP address

Question

Hopefully someone can assist with this question.

I am looking for simple JavaScript code that will update the a href link url and display it on a static HTML page, based on IP address from which the access request came.

The good thing is – the IP will be static and fixed, it will be the same number, which I already have.

In other words, if I access the same page from different IP addresses, the page will display different link url based on that.

While I might be wrong, my understanding is this can be scripted using ‘if else’ logic – if a specific IP address is detected and matched, the JS rewrites the link address.

Here is my logic below. Sorry, I don’t know much of the JavaScript syntax and used the construct below as a hypothetical example (its probably a total wreck since I didn't use the right syntax and whatnot), but this should give the general idea:

**if (location.referrer.ip('123.45.67.89.00') > -1)**

**document.write.href = 'xxx.com';**

**else if (location.referrer.ip('123.98.76.54.00') > -1)**

**document.write.href = 'yyy.com';**

**else**

**document.write.href = 'zzz.com';**

It is my understanding that since I will be using a single IP address in the formula, the following code can be omitted:

**else if (location.referrer.ip('123.98.76.54.00') > -1)**

**document.write.href = 'yyy.com/';**

Leaving only something like this

**if (location.referrer.ip('123.45.67.89.00') > -1)**

**document.write.href = 'xxx.com';**

**else**

**document.write.href = 'zzz.com';**

Again, this might not be the correct approach altogether and a way more sophisticated solution will be needed, therefore I hope that some of you with coding expertise can provide some assistance. Just to be clear - the script should NOT redirect the page but only update the url behind the link displayed on it instead.

I know there are several technologies already out there that can offer the solution, but my task is to get this running on the client side in the browser; I am not allowed to use server side technologies like Dot.NET, ASP, JSP, or anything other than JavaScript and static html.

Can someone please advice if this can be done this way? Basically, I just need to know if the approach I described above would work and if yes, what is the syntax for 'if' and 'else' lines.

Greatly appreciate any help, Thank YOU!

JK

Answer 1

I went looking for an answer to the same question just today and couldn't find anything. After a bit of tinkering I figured out a solution and registered on this site just to share it.

In my particular situation I was building my website to provide different href's based on the IP, but more specifically whether it was a local IP (192.168.x.x) or an external IP. Objective was to circumvent the NAT loopback problem (external IP address not accessible when connected to the same IP locally)

first off, we're going to use php so rename the file from extension .html to .php, then add this anywhere in your code and just replace the IP with whatever IP you're searching for

<?php
$ipaddress = getenv('REMOTE_ADDR');
if (fnmatch("192.168.*", $ipaddress)) {
  echo '<a href="http://192.168.2.40:8080">This button is for local IP</a>';
  $link = 'http://192.168.2.40:8080';
} else {
  echo '<a href="http://www.myddns.com:8080">This button is for external IP</a>';
  $link = 'http://www.myddns.com:8080';
}
?>

One weird thing I noticed about this is that I couldn't have the link be an image inside the above php tags, so I worked around that by including this after:

<a href="<?php echo "$link";?>"><img src="image/pic.png" onmouseover="this.src='image/picMouseOver.png'" onmouseout="this.src='image/pic.png'" border="0" alt="Link"></a>

Note that this code works fine when loaded to a proper web server, but when just double clicking and testing directly in chrome it won't work. Just be aware of that (i.e. you will have to put it on your webserver or install php for windows to test it)

That answers your question... but on a related note I wanted to share something else.

So I have multiple domains that link to the same site, but wanted links to point to the same domain you came in on originally. So for that reason I was stuck using relative links and not the full URL (i.e. so if you found the website from www.website1.com, buttons wouldn't send you to www.website2.com\link.html)

I wanted to figure out how to make a relative link to a different port but learned it couldn't be done without hardcoding the domain. So I combined what I just did above with the instructions here: Relative URL to a different port number in a hyperlink?

and wrote this method to change the URL just after the page loads, so hovering over the link or doing "Copy Link Location" will get the updated URL with the port number:

<html>
<head>
<script>
function setHref1() {
document.getElementById('modify-me').href = window.location.protocol + "//" + window.location.hostname + ":32400/web/index.html";
}
</script>

<?php
$ipaddress = getenv('REMOTE_ADDR');
if (fnmatch("192.168.*", $ipaddress)) {
//  echo '<a href="http://192.168.2.40:8080">This button is for local IP</a>';
  $link = 'http://192.168.2.40:8080';
  $id = '';
} else {
//  echo '<a href="http://www.myddns.com:8080">This button is for external IP</a>';
  $link = 'http://www.myddns.com:8080';
  $id = 'modify-me';
}
?>

</head>

<body onload="setHref1()">

<a href="<?php echo "$link";?>" id="<?php echo "$id";?>" ><img src="image/pic.png" onmouseover="this.src='image/picMouseOver.png'" onmouseout="this.src='image/pic.png'" border="0" alt="Link"></a>

</body> 
</html>

edit: You might also find this code to display visitors IP addresses interesting:

<html>
<head>
 <title>What is my IP address?</title>
</head>
<body>
<?php

    if (getenv('HTTP_X_FORWARDED_FOR')) {
        $pipaddress = getenv('HTTP_X_FORWARDED_FOR');
        $ipaddress = getenv('REMOTE_ADDR');
echo "Your Proxy IP address is : ".$pipaddress. "(via $ipaddress)" ;
    } else {
        $ipaddress = getenv('REMOTE_ADDR');
        echo "Your IP address is : $ipaddress";
    }
?>
</body>
</html>

source: http://www.cyberciti.biz/faq/how-to-determine-retrieve-visitors-ip-address-use-php-code-programming/