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

html本机ip代码

admin
行业动态
2025-05-01
4204

“`html，，，fetch(‘https://api.ipify.org?format=json’).then(r=>r.json()).then(d=>document.write(d.ip))，

获取本机IP地址的HTML与JavaScript实现

核心原理

浏览器无法直接获取本机IP地址，但可通过外部API服务或服务器端协助间接获取,以下代码通过调用公共IP地址查询API实现。

html本机ip代码第1张

完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">获取本机IP</title>
    <style>
        body { font: 16px/1.5 Arial; }
        #ipBtn { padding: 10px 20px; }
        #result { margin-top: 20px; font-weight: bold; }
    </style>
</head>
<body>
    <button id="ipBtn">点击获取本机IP</button>
    <div id="result">您的IP地址将显示在这里</div>
    <script>
        document.getElementById('ipBtn').addEventListener('click', function() {
            fetch('https://api.ipify.org?format=json') // 调用公共API
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = `您的IP地址是：${data.ip}`;
                })
                .catch(error => {
                    document.getElementById('result').textContent = '获取失败，请检查网络连接';
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</html>

关键步骤说明

步骤	操作	作用
HTML结构	创建按钮(`id="ipBtn"`)和结果显示区(`id="result"`)	提供用户交互入口和展示区域
事件绑定	为按钮添加`click`事件监听器	触发IP获取操作
API调用	使用`fetch`访问`https://api.ipify.org?format=json`	向公共API发送请求，获取客户端IP
数据处理	解析JSON响应，提取`ip`字段	将返回的IP地址动态插入页面
错误处理	捕获网络错误并显示提示信息	处理网络异常或API不可用情况

常见问题与扩展

问题	解决方案/说明
Q1：为什么要用第三方API？	浏览器出于安全限制，无法直接获取本机IP，第三方API通过外部服务器中转，返回客户端真实IP。
Q2：如何部署自己的IP查询服务？	使用Node.js等后端技术，通过`req.socket.remoteAddress`获取客户端IP，构建自定义API接口。

代码优化建议

兼容旧浏览器：替换fetch为XMLHttpRequest（需调整语法）
多API备用：增加备用API（如https://ipinfo.io/json）提高可靠性
样式增强：添加加载动画或禁用按钮防止重复点击
本地存储：将IP缓存到localStorage减少重复请求

相关问题与解答

问题1：为什么浏览器不直接暴露本机IP？

解答：浏览器遵循同源策略和安全限制，防止网页未经授权获取用户网络信息,必须通过跨域请求或服务器中转才能获取IP。

问题2：如何通过服务器端获取客户端IP？

解答：在服务器端（如Node.js、PHP等），可通过请求头X-Forwarded-For或连接对象属性（如req.connection.remoteAddress）获取客户端真实IP。

// Node.js Express示例
app.get('/get-ip', (req, res) => {
    const clientIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    res.send(`您的IP是：${clientIp}`);
});