JS获取IP、IP所在城市、域名、完整URL、当前时间

本文介绍了一种使用JavaScript获取客户端IP地址、所在城市、访问域名、完整URL及当前时间的方法。通过调用搜狐提供的IP地址查询接口,实现了网页中自动填充这些信息的功能。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS获取IP、IP所在城市、域名、完整URL、当前时间</title>
</head>

<body>
<h2>JS获取IP、IP所在城市、域名、完整URL、当前时间</h2>
<input type="text" id="ip" name="ip" />
<input type="text" id="city" name="city" />
<input type="text" id="domain" name="domain" />
<input type="text" id="laiyuan" name="laiyuan" />
<input type='text' name='time' id='time'/>

<!--搜狐IP地址查询接口(可设置编码)--> 
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 
<script>
var d=new Date();
document.getElementById("time").value=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+d.getHours()+"点"+d.getMinutes()+"分";
/*来源页面*/
var laiyuan=document.URL; 
document.getElementById("laiyuan").value=laiyuan;
/*访问域名*/
var domain=location.hostname;
document.getElementById("domain").value=domain;
/*IP*/
document.getElementById("ip").value=returnCitySN["cip"];
/*IP所在城市*/
document.getElementById("city").value=returnCitySN["cname"];
</script>
</body>
</html>

<think>我们有一个给定的公网IP地址,需要查询其所在的省市信息。根据引用[1]中的示例,我们可以使用腾讯地图的API来实现。该API的URL为:`https://apis.map.qq.com/ws/location/v1/ip`,需要传递参数`ip`(要查询的IP地址)`key`(注册腾讯地图API时得的密钥)。返回的数据中,`result.ad_info`包含了省、市、区信息。 步骤: 1. 准备请求参数:包括key(腾讯地图API密钥)ip(给定的公网IP地址)。 2. 使用JSONP方式发起请求(因为涉及跨域,腾讯地图API支持JSONP)。 3. 解析返回结果,提取省份城市信息。 注意:由于是JSONP请求,我们可以使用动态创建script标签的方式,也可以使用jQuery的ajax方法(指定dataType为'jsonp')。这里我们使用jQuery为例。 代码示例: 假设我们有一个公网IP地址:`14.17.22.33`,并已申请到腾讯地图API的密钥(key)。 ```html <!DOCTYPE html> <html> <head> <title>根据IP获取省市</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <script> // 腾讯地图API密钥,需要替换成自己的 const key = '你的腾讯地图API密钥'; // 要查询的IP地址 const ip = '14.17.22.33'; // 调用腾讯地图API function getLocationByIP(ip, key) { const url = 'https://apis.map.qq.com/ws/location/v1/ip'; $.ajax({ url: url, type: 'get', dataType: 'jsonp', data: { key: key, ip: ip }, success: function (res) { if (res.status === 0) { const ad_info = res.result.ad_info; const province = ad_info.province; const city = ad_info.city; console.log('省份:', province); console.log('城市:', city); // 将结果显示在页面上 $('#result').html(`IP地址:${ip}<br>省份:${province}<br>城市:${city}`); } else { console.error('请求失败:', res.message); $('#result').html('请求失败:' + res.message); } }, error: function (err) { console.error('API调用失败:', err); $('#result').html('API调用失败'); } }); } // 调用函数 getLocationByIP(ip, key); </script> <div id="result"></div> </body> </html> ``` 说明: 1. 需要先申请腾讯地图API密钥(免费),申请地址:腾讯位置服务官网(https://lbs.qq.com/)。 2. 将代码中的`你的腾讯地图API密钥`替换为实际密钥。 3. 该API返回的`ad_info`对象中,`province`是省份,`city`是城市。 4. 注意:免费额度可能有限制,请根据实际情况使用。 如果不想使用jQuery,也可以使用原生JavaScript的JSONP实现,但jQuery简化了操作。 另外,引用[1]中的示例返回的数据还包含了经度纬度,我们这里只需要省市。 注意:腾讯地图API要求使用HTTPS,而且需要密钥,所以请确保密钥正确。 其他注意事项: - 如果IP地址为空,则默认使用请求端的公网IP(即当前用户自己的IP)进行查询。 - 免费配额可能有限,超出配额需要购买。 如果需要使用其他API(如百度地图),方法类似,但参数返回数据结构不同。 下面提供使用原生JavaScript实现JSONP的版本(不依赖jQuery): ```html <!DOCTYPE html> <html> <head> <title>根据IP获取省市(原生JSONP)</title> </head> <body> <script> // 腾讯地图API密钥,需要替换成自己的 const key = '你的腾讯地图API密钥'; const ip = '14.17.22.33'; function jsonp(url, data, callbackName, callback) { // 创建script标签 const script = document.createElement('script'); // 构建参数字符串 let params = ''; for (let k in data) { params += (params ? '&' : '') + k + '=' + encodeURIComponent(data[k]); } // 设置回调函数名(由腾讯地图API决定,腾讯地图API的回调参数名为callback) // 腾讯地图API要求传入callback参数,指定回调函数名 url += (url.indexOf('?') === -1 ? '?' : '&') + params + '&callback=' + callbackName; script.src = url; // 定义全局回调函数 window[callbackName] = function (res) { callback(res); // 移除script标签 document.body.removeChild(script); delete window[callbackName]; }; // 添加错误处理 script.onerror = function () { callback(null, new Error('请求失败')); document.body.removeChild(script); delete window[callbackName]; }; document.body.appendChild(script); } // 回调函数名 const callbackName = 'jsonpCallback_' + Date.now(); jsonp( 'https://apis.map.qq.com/ws/location/v1/ip', { key: key, ip: ip }, callbackName, function (res, err) { if (err) { console.error('请求出错', err); document.getElementById('result').innerHTML = '请求出错'; return; } if (res && res.status === 0) { const province = res.result.ad_info.province; const city = res.result.ad_info.city; document.getElementById('result').innerHTML = `省份:${province},城市:${city}`; } else { console.error('请求失败', res ? res.message : ''); document.getElementById('result').innerHTML = '请求失败'; } } ); </script> <div id="result"></div> </body> </html> ``` 在原生JSONP实现中,我们动态创建了一个script标签,并设置其src为API地址(包含参数回调函数名)。然后定义一个全局函数来处理返回的数据。请求完毕后移除script标签并删除全局函数。 两种方法都可以使用,根据项目需要选择。 最后,请注意保护你的API密钥,不要将其暴露在公开代码库中(如果前端无法避免,可以设置域名白名单来限制使用)。 §§相关问题§§ 1. 如何申请腾讯地图API密钥? 2. 除了腾讯地图,还有哪些免费IP定位API? 3. 如何在后端(如Node.js)中调用IP定位API? 4. 如何限制API密钥的使用域名以防止滥用? 5. 如何处理API调用超时的情况? </think>### JavaScript根据公网IP地址获取省市信息的方法 要使用JavaScript根据给定公网IP地址获取所在省市信息,最可靠的方式是调用地理位置API服务。腾讯地图API提供了一个简洁的解决方案,如引用[1]所示。以下是具体实现方法: #### 核心步骤 1. **准备API密钥**:在腾讯位置服务平台注册账号并获取API密钥(Key) 2. **构建请求URL**:使用腾讯地图的IP定位API 3. **发起JSONP请求**:处理跨域限制 4. **解析响应数据**:提取省市信息 #### 示例代码 ```html <!DOCTYPE html> <html> <head> <title>IP地址定位</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="locationResult">正在获取位置信息...</div> <script> // 腾讯地图API密钥(需替换为实际密钥) const API_KEY = "YOUR_TENCENT_MAP_KEY"; // 要查询的公网IP地址 const TARGET_IP = "14.17.22.33"; // 示例IP function getLocationByIP(ip) { const url = "https://apis.map.qq.com/ws/location/v1/ip"; $.ajax({ url: url, type: "GET", dataType: "jsonp", data: { key: API_KEY, ip: ip, output: "jsonp" }, success: function(response) { if (response.status === 0) { const province = response.result.ad_info.province; const city = response.result.ad_info.city; $("#locationResult").html(` <p>IP地址:${ip}</p> <p>省份:${province}</p> <p>城市:${city}</p> `); } else { $("#locationResult").html("获取位置失败:" + response.message); } }, error: function(xhr, status, error) { $("#locationResult").html("API请求失败:" + error); } }); } // 调用函数查询指定IP getLocationByIP(TARGET_IP); </script> </body> </html> ``` #### 关键点说明 1. **API密钥申请**: - 访问腾讯位置服务平台(https://lbs.qq.com/)注册账号 - 创建新应用获取API密钥 - 免费版通常有每日调用限额(约1万次) 2. **返回数据结构**: ```json { "status": 0, "result": { "ip": "14.17.22.33", "ad_info": { "province": "广东省", "city": "深圳市" } } } ``` 3. **替代方案**: - 百度地图API:`https://api.map.baidu.com/location/ip?ak=您的AK&ip=14.17.22.33` - IP-API(免费):`http://ip-api.com/json/14.17.22.33` #### 注意事项 1. **跨域处理**: - 必须使用JSONP格式(如示例中的`dataType: "jsonp"`) - CORS限制下普通AJAX请求会被浏览器阻止 2. **精度问题**: - IP定位精度通常为城市级(准确率约80-90%) - 移动网络IP可能定位到归属地而非实际位置 3. **错误处理**: - 检查响应中的`status`字段(0表示成功) - 常见错误码:`310`(参数错误)、`311`(Key格式错误) 4. **安全限制**: - 前端暴露API密钥存在风险,生产环境建议通过后端代理 - 敏感场景建议使用HTTPS协议 > 示例中使用了jQuery简化实现,也可替换为原生JavaScript的JSONP实现或Fetch API(需配置CORS代理)[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值