如何在网页弹窗中打印IP地址？纯JavaScript无后端实现问询

核心说明 #

浏览器的安全策略与同源限制，导致纯前端JavaScript无法直接读取用户公网IP——这就是你之前找到的代码全部失效的原因。想要实现需求，必须借助公开的免费IP查询服务（无需自建后端）来获取IP，再进行网段判断。

1. 获取用户公网IP #

使用fetch调用公开IP查询接口，示例代码：

// 异步获取用户公网IP
async function getUserPublicIP() {
  try {
    const res = await fetch('https://api.ipify.org?format=json');
    const data = await res.json();
    return data.ip; // 返回格式如 "114.114.114.114" 的字符串
  } catch (err) {
    console.error('IP获取失败:', err);
    return null;
  }
}

这类接口均为免费公开服务，仅返回公网IP，无额外隐私数据泄露风险。

2. 判断IP是否在指定网段 #

将IP与网段起止地址转换为整数后，进行范围比对，示例工具函数：

// 将IP字符串转为32位整数
function ipStringToInt(ip) {
  return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0) >>> 0;
}

// 检查IP是否在目标网段范围内
function checkIPInRange(userIP, startIP, endIP) {
  const userIPInt = ipStringToInt(userIP);
  const startInt = ipStringToInt(startIP);
  const endInt = ipStringToInt(endIP);
  return userIPInt >= startInt && userIPInt <= endInt;
}

3. 完整使用示例 #

async function judgeUserLocation() {
  const userIP = await getUserPublicIP();
  if (!userIP) return;

  // 示例：判断是否在 223.5.5.0 - 223.5.5.255 网段内
  const isInTargetArea = checkIPInRange(userIP, '223.5.5.0', '223.5.5.255');

  if (isInTargetArea) {
    console.log('用户处于目标区域');
    // 此处添加区域专属逻辑，如显示定制内容
  } else {
    console.log('用户不在目标区域');
  }
}

// 启动执行
judgeUserLocation();

注意事项 #

• 部分浏览器隐私模式可能拦截跨域请求，需做好错误兜底处理；
• 不要用局域网IP（如192.168.x.x）做位置判断，同一局域网网段可能在全球多地重复使用；
• 若需更精准的地理位置判断，可在获取IP后调用同类型服务的地理信息接口（无需后端），但需留意服务的隐私政策。

内容的提问来源于stack exchange，提问作者Salman