I need to somehow retrieve the client's IP address using JavaScript; no server side code, not even SSI.
However, I'm not against using a free 3rd party script/service.
I would use a web service that can return JSON (along with jQuery to make things simpler). Below are all the free active IP lookup services I could find and the information they return. If you know of any more, then please add a comment and I'll update this answer.
Try it: http://api.db-ip.com/addrinfo?api_key=<your api key>&addr=<ip address>
Returns:
{
"address": "116.12.250.1",
"country": "SG",
"stateprov": "Central Singapore",
"city": "Singapore"
}
Limitations:
Try it: http://gd.geobytes.com/GetCityDetails
$.getJSON('http://gd.geobytes.com/GetCityDetails?callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"geobytesforwarderfor": "",
"geobytesremoteip": "116.12.250.1",
"geobytesipaddress": "116.12.250.1",
"geobytescertainty": "99",
"geobytesinternet": "SA",
"geobytescountry": "Saudi Arabia",
"geobytesregionlocationcode": "SASH",
"geobytesregion": "Ash Sharqiyah",
"geobytescode": "SH",
"geobyteslocationcode": "SASHJUBA",
"geobytescity": "Jubail",
"geobytescityid": "13793",
"geobytesfqcn": "Jubail, SH, Saudi Arabia",
"geobyteslatitude": "27.004999",
"geobyteslongitude": "49.660999",
"geobytescapital": "Riyadh ",
"geobytestimezone": "+03:00",
"geobytesnationalitysingular": "Saudi Arabian ",
"geobytespopulation": "22757092",
"geobytesnationalityplural": "Saudis",
"geobytesmapreference": "Middle East ",
"geobytescurrency": "Saudi Riyal",
"geobytescurrencycode": "SAR",
"geobytestitle": "Saudi Arabia"
}
Limitations:
Try it: https://json.geoiplookup.io/api
$.getJSON('https://json.geoiplookup.io/api?callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"isp": "SGPOST",
"org": "Singapore Post Ltd",
"hostname": "116.12.250.1",
"longitude": "103.807",
"latitude": "1.29209",
"postal_code": "",
"city": "Singapore",
"country_code": "SG",
"country_name": "Singapore",
"continent_code": "AS",
"region": "Central Singapore",
"district": "",
"timezone_name": "Asia\/Singapore",
"connection_type": "",
"asn": "AS3758 SingNet",
"currency_code": "SGD",
"currency_name": "Singapore Dollar",
"success": true
}
Limitations:
Try it: http://www.geoplugin.net/json.gp
$.getJSON('http://www.geoplugin.net/json.gp?jsoncallback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"geoplugin_request": "116.12.250.1",
"geoplugin_status": 200,
"geoplugin_credit": "Some of the returned data includes GeoLite data created by MaxMind, available from <a href=\\'http://www.maxmind.com\\'>http://www.maxmind.com</a>.",
"geoplugin_city": "Singapore",
"geoplugin_region": "Singapore (general)",
"geoplugin_areaCode": "0",
"geoplugin_dmaCode": "0",
"geoplugin_countryCode": "SG",
"geoplugin_countryName": "Singapore",
"geoplugin_continentCode": "AS",
"geoplugin_latitude": "1.2931",
"geoplugin_longitude": "103.855797",
"geoplugin_regionCode": "00",
"geoplugin_regionName": "Singapore (general)",
"geoplugin_currencyCode": "SGD",
"geoplugin_currencySymbol": "$",
"geoplugin_currencySymbol_UTF8": "$",
"geoplugin_currencyConverter": 1.4239
}
Limitations:
Try it: https://api.hackertarget.com/geoip/?q=<ip address>
Returns:
IP Address: 116.12.250.1
Country: SG
State: N/A
City: Singapore
Latitude: 1.293100
Longitude: 103.855797
Limitations:
Try it: https://ipapi.co/json/
$.getJSON('https://ipapi.co/json/', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"city": "Singapore",
"region": "Central Singapore Community Development Council",
"country": "SG",
"country_name": "Singapore",
"postal": null,
"latitude": 1.2855,
"longitude": 103.8565,
"timezone": "Asia/Singapore"
}
Limitations:
Try it: http://ip-api.com/json
$.getJSON('http://ip-api.com/json?callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"as": "AS3758 SingNet",
"city": "Singapore",
"country": "Singapore",
"countryCode": "SG",
"isp": "SingNet Pte Ltd",
"lat": 1.2931,
"lon": 103.8558,
"org": "Singapore Telecommunications",
"query": "116.12.250.1",
"region": "01",
"regionName": "Central Singapore Community Development Council",
"status": "success",
"timezone": "Asia/Singapore",
"zip": ""
}
Limitations:
Try it: https://api.ipdata.co
$.getJSON('https://api.ipdata.co', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"city": "Singapore",
"region": "Central Singapore Community Development Council",
"region_code": "01",
"country_name": "Singapore",
"country_code": "SG",
"continent_name": "Asia",
"continent_code": "AS",
"latitude": 1.2931,
"longitude": 103.8558,
"asn": "AS3758",
"organisation": "SingNet",
"postal": "",
"calling_code": "65",
"flag": "https://ipdata.co/flags/sg.png",
"emoji_flag": "\ud83c\uddf8\ud83c\uddec",
"emoji_unicode": "U+1F1F8 U+1F1EC",
"is_eu": false,
"languages": [
{
"name": "English",
"native": "English"
},
{
"name": "Malay",
"native": "Bahasa Melayu"
},
{
"name": "Tamil",
"native": "\u0ba4\u0bae\u0bbf\u0bb4\u0bcd"
},
{
"name": "Chinese",
"native": "\u4e2d\u6587"
}
],
"currency": {
"name": "Singapore Dollar",
"code": "SGD",
"symbol": "S$",
"native": "$",
"plural": "Singapore dollars"
},
"time_zone": {
"name": "Asia/Singapore",
"abbr": "+08",
"offset": "+0800",
"is_dst": false,
"current_time": "2018-05-09T12:28:49.183674+08:00"
},
"threat": {
"is_tor": false,
"is_proxy": false,
"is_anonymous": false,
"is_known_attacker": false,
"is_known_abuser": false,
"is_threat": false,
"is_bogon": false
}
}
Limitations:
Try it: https://ipfind.co/me?auth=<your api key>
$.getJSON('https://ipfind.co/me?auth=<your_api_key>', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip_address": "116.12.250.1",
"country": "Singapore",
"country_code": "SG",
"continent": "Asia",
"continent_code": "AS",
"city": "Singapore",
"county": null,
"region": "Central Singapore",
"region_code": "01",
"timezone": "Asia/Singapore",
"owner": null,
"longitude": 103.8565,
"latitude": 1.2855,
"currency": "SGD",
"languages": [
"cmn",
"en-SG",
"ms-SG",
"ta-SG",
"zh-SG"
]
}
Limitations:
Try it: https://api.ipgeolocation.io/ipgeo?apiKey=<your api key>
$.getJSON('https://api.ipgeolocation.io/ipgeo?apiKey=<your_api_key>', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"continent_code": "AS",
"continent_name": "Asia",
"country_code2": "SG",
"country_code3": "SGP",
"country_name": "Singapore",
"country_capital": "Singapore",
"state_prov": "Central Singapore",
"district": "",
"city": "Singapore",
"zipcode": "",
"latitude": "1.29209",
"longitude": "103.807",
"is_eu": false,
"calling_code": "+65",
"country_tld": ".sg",
"languages": "cmn,en-SG,ms-SG,ta-SG,zh-SG",
"country_flag": "https://ipgeolocation.io/static/flags/sg_64.png",
"isp": "SGPOST",
"connection_type": "",
"organization": "Singapore Post Ltd",
"geoname_id": "1880252",
"currency": {
"name": "Dollar",
"code": "SGD"
},
"time_zone": {
"name": "Asia/Singapore",
"offset": 8,
"is_dst": false,
"current_time": "2018-06-12 09:06:49.028+0800"
}
}
Limitations:
Try it: https://api.ipify.org/?format=json
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1"
}
Limitations:
Try it: https://api.ipinfodb.com/v3/ip-city/?key=<your api key>&format=json
$.getJSON('https://api.ipinfodb.com/v3/ip-city/?key=<your_api_key>&format=json&callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"statusCode": "OK",
"statusMessage": "",
"ipAddress": "116.12.250.1",
"countryCode": "SG",
"countryName": "Singapore",
"regionName": "Singapore",
"cityName": "Singapore",
"zipCode": "048941",
"latitude": "1.28967",
"longitude": "103.85",
"timeZone": "+08:00"
}
Limitations:
Try it: https://ipinfo.io/json
$.getJSON('https://ipinfo.io/json', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"hostname": "No Hostname",
"city": "Singapore",
"region": "Central Singapore Community Development Council",
"country": "SG",
"loc": "1.2931,103.8558",
"org": "AS3758 SingNet"
}
Limitations:
Try it: http://api.ipstack.com/<ip address>?access_key=<your api key>
$.getJSON('http://api.ipstack.com/<ip_address>?access_key=<your_api_key>', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"type": "ipv4",
"continent_code": "AS",
"continent_name": "Asia",
"country_code": "SG",
"country_name": "Singapore",
"region_code": "01",
"region_name": "Central Singapore Community Development Council",
"city": "Singapore",
"zip": null,
"latitude": 1.2931,
"longitude": 103.8558,
"location": {
"geoname_id": 1880252,
"capital": "Singapore",
"languages": [{
"code": "en",
"name": "English",
"native": "English"
},
{
"code": "ms",
"name": "Malay",
"native": "Bahasa Melayu"
},
{
"code": "ta",
"name": "Tamil",
"native": "\u0ba4\u0bae\u0bbf\u0bb4\u0bcd"
},
{
"code": "zh",
"name": "Chinese",
"native": "\u4e2d\u6587"
}],
"country_flag": "http:\/\/assets.ipstack.com\/flags\/sg.svg",
"country_flag_emoji": "\ud83c\uddf8\ud83c\uddec",
"country_flag_emoji_unicode": "U+1F1F8 U+1F1EC",
"calling_code": "65",
"is_eu": false
}
}
Limitations:
Try it: https://jsonip.com
$.getJSON('https://jsonip.com/?callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1",
"about": "/about",
"Pro!": "http://getjsonip.com",
"reject-fascism": "Liberal America will prevail"
}
Limitations:
Try it: http://ip.jsontest.com/
$.getJSON('http://ip.jsontest.com/?callback=?', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"ip": "116.12.250.1"
}
Limitations:
Try it: https://geoip.nekudo.com/api
$.getJSON('https://geoip.nekudo.com/api', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"city": "Singapore",
"country": {
"name": "Singapore",
"code": "SG"
},
"location": {
"accuracy_radius": 50,
"latitude": 1.2855,
"longitude": 103.8565,
"time_zone": "Asia/Singapore"
},
"ip": "116.12.250.1"
}
Limitations:
Try it: http://www.stupidwebtools.com/api/my_ip.json
$.getJSON('http://www.stupidwebtools.com/api/my_ip.json', function(data) {
console.log(JSON.stringify(data, null, 2));
});
Returns:
{
"my_ip": {
"ip": "116.12.250.1",
"others": []
}
}
Limitations:
Keep in mind that since these are all free services, your mileage may vary in terms of exceeding quota and uptime, and who knows when/if they will be taken offline down the road (exhibit A: Telize). Most of these services also offer a paid tier in case you want more features like SSL support.
Also, as skobaljic noted in the comments below, the request quotas are mostly academic since this is happening client-side and most end users will never exceed the quota.
UPDATES
if statement
with the freegeoip.net
option, such that if an item is empty, it shows NOT FOUND
, how do I go about it - Afolabi Olaoluwa Akinwumi 2016-11-23 13:25
$.getJSON('//freegeoip.net/json/?callback=?', function(data) {
if (!data || !data.ip) alert('IP not found');
}).fail(function() {
alert('$.getJSON() request failed');
});
thdoan 2016-11-24 09:52
uBlock Origin has prevented the following page from loading:
https://geoip.nekudo.com/api/IP-address-removed-from-here
Because of the following filter
||geoip.nekudo.com^
Found in: EasyPrivacy
< - Rob Waa 2018-04-16 08:27
https://api.ipgeolocation.io/getip
It has some intelligent filtering of results as well. Here is main geolocation endpoint 'https://api.ipgeolocation.io/ipgeo?ip=1.1.1.1&apiKey=API_KEY'
You can read more about it on https://ipgeolocation.io/documentatio - Ejaz Ahmed 2018-06-11 19:38
Update: I always wanted to make a min/ uglified version of the code, so here is an ES6 Promise code:
var findIP = new Promise(r=>{var w=window,a=new (w.RTCPeerConnection||w.mozRTCPeerConnection||w.webkitRTCPeerConnection)({iceServers:[]}),b=()=>{};a.createDataChannel("");a.createOffer(c=>a.setLocalDescription(c,b,b),b);a.onicecandidate=c=>{try{c.candidate.candidate.match(/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g).forEach(r)}catch(e){}}})
/*Usage example*/
findIP.then(ip => document.write('your ip: ', ip)).catch(e => console.error(e))
Note: This new minified code would return only single IP if you want all the IPs of the user( which might be more depending on his network), use the original code...
thanks to WebRTC, it is very easy to get local IP in WebRTC supported browsers( at least for now). I have modified the source code, reduced the lines, not making any stun requests since you only want Local IP, not the Public IP, the below code works in latest Firefox and Chrome, just run the snippet and check for yourself:
function findIP(onNewIP) { // onNewIp - your listener function for new IPs
var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
var pc = new myPeerConnection({iceServers: []}),
noop = function() {},
localIPs = {},
ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
key;
function ipIterate(ip) {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
}
pc.createDataChannel(""); //create a bogus data channel
pc.createOffer(function(sdp) {
sdp.sdp.split('\n').forEach(function(line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(ipIterate);
});
pc.setLocalDescription(sdp, noop, noop);
}, noop); // create offer and set local description
pc.onicecandidate = function(ice) { //listen for candidate events
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
};
}
var ul = document.createElement('ul');
ul.textContent = 'Your IPs are: '
document.body.appendChild(ul);
function addIP(ip) {
console.log('got ip: ', ip);
var li = document.createElement('li');
li.textContent = ip;
ul.appendChild(li);
}
findIP(addIP);
<h1> Demo retrieving Client IP using WebRTC </h1>
what is happening here is, we are creating a dummy peer connection, and for the remote peer to contact us, we generally exchange ice candidates with each other. And reading the ice candidates( from local session description and onIceCandidateEvent) we can tell the IP of the user.
where I took code from --> Source
You can, relaying it via server side with JSONP
And while googling to find one, found it here on SO Can I perform a DNS lookup (hostname to IP address) using client-side Javascript?
<script type="application/javascript">
function getip(json){
alert(json.ip); // alerts the ip address
}
</script>
<script type="application/javascript" src="http://www.telize.com/jsonip?callback=getip"></script>
Note : The telize.com API has permanently shut down as of November 15th, 2015.
Over Quota
This application is temporarily over its serving quota. Please try again later. - Brad M 2013-12-18 15:06
Most of the answers here "work around" the need for server-side code by... Hitting someone else's server. Which is a totally valid technique, unless you actually do need to get the IP address without hitting a server.
Traditionally this wasn't possible without some sort of a plugin (and even then, you'd likely get the wrong IP address if you were behind a NAT router), but with the advent of WebRTC it is actually possible to do this... If you're targeting browsers that support WebRTC (currently: Firefox, Chrome and Opera).
Please read mido's answer for details on how you can retrieve useful client IP addresses using WebRTC.
You can do an ajax call to hostip.info or a similar service...
function myIP() {
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","http://api.hostip.info/get_html.php",false);
xmlhttp.send();
hostipInfo = xmlhttp.responseText.split("\n");
for (i=0; hostipInfo.length >= i; i++) {
ipAddress = hostipInfo[i].split(":");
if ( ipAddress[0] == "IP" ) return ipAddress[1];
}
return false;
}
As a bonus, geolocalisation information is returned in the same call.
Try this
$.get("http://ipinfo.io", function(response) {
alert(response.ip);
}, "jsonp");
OR
$(document).ready(function () {
$.getJSON("http://jsonip.com/?callback=?", function (data) {
console.log(data);
alert(data.ip);
});
});
Check out http://www.ipify.org/
According to them:
- You can use it without limit (even if you're doing millions of requests per minute).
- ipify is completely open source (check out the GitHub repository).
Here's a working JS example (instead of wondering why this answer has so few votes, try it yourself to see it in action):
<script>
function getIP(json) {
alert("My public IP address is: " + json.ip);
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
Too lazy to copy/paste? I like it. Here's a demo
Too lazy to click? :O
Note: Turn off Adblock Plus / uBlock & co before running the demo .. otherwise, it just won't work.
I have nothing to do with the IPify team. I just think it's ridiculously cool that someone would provide such a service for the general good.
You can't. You'd have to ask a server.
You can use my service http://ipinfo.io for this, which will give you the client IP, hostname, geolocation information and network owner. Here's a simple example that logs the IP:
$.get("http://ipinfo.io", function(response) {
console.log(response.ip);
}, "jsonp");
Here's a more detailed JSFiddle example that also prints out the full response information, so you can see all of the available details: http://jsfiddle.net/zK5FN/2/
http://ipinfo.io
to //ipinfo.io
or http - Samuel Elh 2018-04-29 16:53
Include this code in your page : <script type="text/javascript" src="http://l2.io/ip.js"></script>
more doc here
I would say Chad and Malta has great answer. However, theirs are complicated. So I suggest this code that I found from ads by country plugin
<script>
<script language="javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="javascript">
mmjsCountryCode = geoip_country_code();
mmjsCountryName = geoip_country_name();
</script>
No ajax. Just plain javascripts. :D
If you go to http://j.maxmind.com/app/geoip.js you will see that it contains
function geoip_country_code() { return 'ID'; }
function geoip_country_name() { return 'Indonesia'; }
function geoip_city() { return 'Jakarta'; }
function geoip_region() { return '04'; }
function geoip_region_name() { return 'Jakarta Raya'; }
function geoip_latitude() { return '-6.1744'; }
function geoip_longitude() { return '106.8294'; }
function geoip_postal_code() { return ''; }
function geoip_area_code() { return ''; }
function geoip_metro_code() { return ''; }
It doesn't really answer the question yet because
http://j.maxmind.com/app/geoip.js doesn't contain the IP (although I bet it uses the IP to get the country).
But it's so easy to make a PhP script that pop something like
function visitorsIP() { return '123.123.123.123'; }
Make that. Put on http://yourdomain.com/yourip.php.
Then do
<script language="javascript" src="http://yourdomain.com/yourip.php"></script>
The question specifically mention NOT to use third party script. There is no other way. Javascript cannot know your IP. But other servers that can be accessed through javascript can which work just as well with no issue.
There are two interpretations to this question. Most folks interpreted "Client IP" to mean the Public IP Address that Web server's see outside the LAN and out on the Internet. This is not the IP address of the client computer in most cases, though
I needed the real IP address of the computer that is running the browser that is hosting my JavaScript software (which is almost always a local IP address on a LAN that is behind something that NAT layer).
Mido posted a FANTASTIC answer, above, that seems to be the only answer that really provided the IP address of the client.
Thanks for that, Mido!
However, the function presented runs asynchronously. I need to actually USE the IP address in my code, and with an asynchronous solution, I might try to use the IP address before it is retrieved/learned/stored. I had to be able to wait on the results to arrive before using them.
Here is a "Waitable" version of Mido's function. I hope it helps someone else:
function findIP(onNewIP) { // onNewIp - your listener function for new IPs
var promise = new Promise(function (resolve, reject) {
try {
var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
var pc = new myPeerConnection({ iceServers: [] }),
noop = function () { },
localIPs = {},
ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
key;
function ipIterate(ip) {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
}
pc.createDataChannel(""); //create a bogus data channel
pc.createOffer(function (sdp) {
sdp.sdp.split('\n').forEach(function (line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(ipIterate);
});
pc.setLocalDescription(sdp, noop, noop);
}, noop); // create offer and set local description
pc.onicecandidate = function (ice) { //listen for candidate events
if (ice && ice.candidate && ice.candidate.candidate && ice.candidate.candidate.match(ipRegex)) {
ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
}
resolve("FindIPsDone");
return;
};
}
catch (ex) {
reject(Error(ex));
}
});// New Promise(...{ ... });
return promise;
};
//This is the callback that gets run for each IP address found
function foundNewIP(ip) {
if (typeof window.ipAddress === 'undefined')
{
window.ipAddress = ip;
}
else
{
window.ipAddress += " - " + ip;
}
}
//This is How to use the Waitable findIP function, and react to the
//results arriving
var ipWaitObject = findIP(foundNewIP); // Puts found IP(s) in window.ipAddress
ipWaitObject.then(
function (result) {
alert ("IP(s) Found. Result: '" + result + "'. You can use them now: " + window.ipAddress)
},
function (err) {
alert ("IP(s) NOT Found. FAILED! " + err)
}
);
<h1>Demo "Waitable" Client IP Retrieval using WebRTC </h1>
With using Smart-IP.net Geo-IP API. For example, by using jQuery:
$(document).ready( function() {
$.getJSON( "http://smart-ip.net/geoip-json?callback=?",
function(data){
alert( data.host);
}
);
});
There's an easier and free approach that won't ask your visitor for any permission.
It consists in submitting a very simple Ajax POST request to http://freegeoip.net/json. Once you receive your location information, in JSON, you react accordingly by updating the page or redirecting to a new one.
Here is how you submit your request for location information:
jQuery.ajax( {
url: '//freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
console.log(location)
}
} );
Well, I am digressing from the question, but I had a similar need today and though I couldn't find the ID from the client using Javascript, I did the following.
On the server side: -
<div style="display:none;visibility:hidden" id="uip"><%= Request.UserHostAddress %></div>
Using Javascript
var ip = $get("uip").innerHTML;
I am using ASP.Net Ajax, but you can use getElementById instead of $get().
What's happening is, I've got a hidden div element on the page with the user's IP rendered from the server. Than in Javascript I just load that value.
This might be helpful to some people with a similar requirement like yours (like me while I hadn't figure this out).
Cheers!
<script>var uip='<%= Request.UserHostAddress %>';</script>
- Chris Haines 2014-03-17 09:54
Not possible in general unless you use some kind of external service.
Get your IP with jQuery
you can get your public IP address with one line of JS? There is a free service that offers this for you and a get request is all that you need to do:
$.get('http://jsonip.com/', function(r){ console.log(r.ip); });
For the above snippet to work, your browser will have to support CORS (cross-origin request sharing). Otherwise a security exception would be thrown. In older browsers, you can use this version, which uses a JSON-P request:
$.getJSON('http://jsonip.com/?callback=?', function(r){ console.log(r.ip); });
There isn't really a reliable way to get the client computer's IP address.
This goes through some of the possibilities. The code that uses Java will break if the user has multiple interfaces.
http://nanoagent.blogspot.com/2006/09/how-to-find-evaluate-remoteaddrclients.html
From looking at the other answers here it sounds like you may want to get the client's public IP address, which is probably the address of the router they're using to connect to the internet. A lot of the other answers here talk about that. I would recommend creating and hosting your own server side page for receiving the request and responding with the IP address instead of depending on someone else's service that may or may not continue to work.
Javascript / jQuery get Client's IP Address & Location (Country, City)
You only need to embed a tag with "src" link to the server. The server will return "codehelper_ip" as an Object / JSON, and you can use it right away.
// First, embed this script in your head or at bottom of the page.
<script language="Javascript" src="http://www.codehelper.io/api/ips/?js"></script>
// You can use it
<script language="Javascript">
alert(codehelper_ip.IP);
alert(codehelper_ip.Country);
</script>
More information at Javascript Detect Real IP Address Plus Country
If you are using jQUery, you can try:
console.log(codehelper_ip);
It will show you more information about returned object.
If you want callback function, please try this:
// First, embed this script in your head or at bottom of the page.
<script language="Javascript" src="http://www.codehelper.io/api/ips/?callback=yourcallback"></script>
// You can use it
<script language="Javascript">
function yourcallback(json) {
alert(json.IP);
}
</script>
language
attribute, use type="text/javascript"
instead, more on MDNAlex K 2013-10-31 15:29
Appspot.com callback's service isn't available. ipinfo.io seems to be working.
I did an extra step and retrieved all geo info using AngularJS. (Thanks to Ricardo) Check it out.
<div ng-controller="geoCtrl">
<p ng-bind="ip"></p>
<p ng-bind="hostname"></p>
<p ng-bind="loc"></p>
<p ng-bind="org"></p>
<p ng-bind="city"></p>
<p ng-bind="region"></p>
<p ng-bind="country"></p>
<p ng-bind="phone"></p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script>
'use strict';
var geo = angular.module('geo', [])
.controller('geoCtrl', ['$scope', '$http', function($scope, $http) {
$http.jsonp('http://ipinfo.io/?callback=JSON_CALLBACK')
.success(function(data) {
$scope.ip = data.ip;
$scope.hostname = data.hostname;
$scope.loc = data.loc; //Latitude and Longitude
$scope.org = data.org; //organization
$scope.city = data.city;
$scope.region = data.region; //state
$scope.country = data.country;
$scope.phone = data.phone; //city area code
});
}]);
</script>
Working page here: http://www.orangecountyseomarketing.com/projects/_ip_angularjs.html
You can use the userinfo.io javascript library.
<script type="text/javascript" src="userinfo.0.0.1.min.js"></script>
UserInfo.getInfo(function(data) {
alert(data.ip_address);
}, function(err) {
// Do something with the error
});
You can also use requirejs to load the script.
It will give you the IP address of your visitor, as well as a few data on its location (country, city, etc.). It is based on maxmind geoip database.
Disclaimer: I wrote this library
If you're including an file anways, you could do a simple ajax get:
function ip_callback() {
$.get("ajax.getIp.php",function(data){ return data; }
}
And ajax.getIp.php
would be this:
<?=$_SERVER['REMOTE_ADDR']?>
I really like api.ipify.org
because it supports both HTTP and HTTPS.
Here are some examples of getting the IP using api.ipify.org
using jQuery.
https://api.ipify.org?format=json
$.getJSON("https://api.ipify.org/?format=json", function(e) {
alert(e.ip);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://api.ipify.org?format=json
$.getJSON("http://api.ipify.org/?format=json", function(e) {
alert(e.ip);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you don't want it in JSON there is also a plaintext response over HTTPS
https://api.ipify.org
And there is also a plaintext response over HTTP
http://api.ipify.org
I'm going to offer a method that I use a lot when I want to store information in the html page, and want my javascript to read information without actually having to pass parameters to the javascript. This is especially useful when your script is referenced externally, rather than inline.
It doesn't meet the criterion of "no server side script", however. But if you can include server side scripting in your html, do this:
Make hidden label elements at the bottom of your html page, just above the end body tag.
Your label will look like this:
<label id="ip" class="hiddenlabel"><?php echo $_SERVER['REMOTE_ADDR']; ?></label>
Be sure to make a class called hiddenlabel
and set the visibility:hidden
so no one actually sees the label. You can store lots of things this way, in hidden labels.
Now, in your javascript, to retrieve the information stored in the label (in this case the client's ip address), you can do this:
var ip = document.getElementById("ip").innerHTML;
Now your variable "ip" equals the ip address. Now you can pass the ip to your API request.
* EDIT 2 YEARS LATER * Two minor refinements:
I routinely use this method, but call the label class="data"
, because, in fact, it is a way to store data. Class name "hiddenlabel" is kind of a stupid name.
The second modification is in the style sheet, instead of visibility:hidden
:
.data{
display:none;
}
...is the better way of doing it.
<script>var ip = '<?php echo $_SERVER['REMOTE_ADDR']; ?>';</script>
works flawlessly and you can access the ip
variable in javascript without even needing to go through the dom with a getElementByID call. And as he said, it's much better for screen readers (or even text rendering browsers - Benjamin C. 2015-05-25 20:42
<label><?php echo $_SERVER['remote_addr']; ?></label>
isn't a good idea - TARKUS 2015-05-27 22:16