当前位置：首页 > 行业动态 > 正文

html怎么获取ip

admin
行业动态
2025-05-10
2

HTML无法直接获取IP，需结合JavaScript调用外部API，如：`fetch(‘https://api.ipify.org?format=json’).then(res=>res.json()).then(data=>console.log(data

通过第三方API获取IP

HTML本身无法直接获取客户端IP，但可以通过JavaScript调用第三方API实现,以下是常见实现方式：

使用免费IP查询API

<!DOCTYPE html>
<html>
<head>获取IP示例</title>
    <script>
        async function getIP() {
            try {
                // 调用ipify API（免费且无需密钥）
                let response = await fetch('https://api.ipify.org?format=json');
                let data = await response.json();
                document.getElementById('ip').innerText = `您的IP是：${data.ip}`;
            } catch (error) {
                document.getElementById('ip').innerText = '获取IP失败';
                console.error(error);
            }
        }
    </script>
</head>
<body onload="getIP()">
    <h1 id="ip">正在获取IP...</h1>
</body>
</html>

其他可用的IP查询服务

服务商	接口地址	特点
ipify	`https://api.ipify.org`	免费、支持JSONP和CORS
ipinfo	`https://ipinfo.io/json`	需注册、含地理位置信息
ipapi	`http://ip-api.com/json/`	免费、含地理位置信息

通过服务器端获取（需后端支持）

后端获取IP并传递给前端

以Node.js为例：

// server.js（需安装express）
const express = require('express');
const app = express();
app.get('/', (req, res) => {
    const clientIP = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    res.send(`<h1>您的IP是：${clientIP}</h1>`);
});
app.listen(3000, () => console.log('Server running on port 3000'));

前端接收服务器传递的IP

<!DOCTYPE html>
<html>
<head>服务器端获取IP</title>
</head>
<body>
    <h1 id="ip"></h1>
    <script>
        // 假设后端已将IP注入到页面中
        document.getElementById('ip').innerText = `您的IP是：${clientIP}`;
    </script>
</body>
</html>

常见问题与解答

问题1：如何区分IPv4和IPv6？

解答：

IPv4格式为xxx.xxx.xxx.xxx（4组数字），如168.1.1
IPv6格式为xxxx:xxxx:xxxx:xxxx（8组十六进制数），如2001:0db8:85a3:0000:0000:8a2e:0370:7334

JavaScript可通过正则表达式判断：

const isIPv4 = /^(d{1,3}.){3}d{1,3}$/.test(ip);
const isIPv6 = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/.test(ip);

问题2：如果获取IP失败怎么办？

解答：

检查网络连接：确保设备正常联网
验证API可用性：尝试在浏览器直接访问API地址（如https://api.ipify.org）
处理跨域问题：确认API支持CORS（大多数公共API已配置）

添加错误处理：在代码中捕获异常并提示用户，

fetch('https://api.ipify.org')
  .then(response => {
      if (!response.ok) throw new Error('网络响应异常');
      return response.text();
  })
  .then(ip => document.getElementById('ip').innerText = `IP: ${ip}`)
  .catch(error => document.getElementById('ip').innerText = '获取失败：' +

获取