最近开始筹备隐私政策的撰写了，注意到 洪涝 Heo 的隐私政策有这样一个表格，感觉有趣，尝试借鉴一下：

Heo 发布过这一教程：js 获取用户 IP 和地理位置信息、UA 并展示 | 张洪 Heo (zhheo.com) 但是近期该 API 出现了一些问题（从上图你可以发现其中的问题所在）。下面我通过使用另一个接口： https://2023.ipchaxun.com/ 来尝试实现这个功能。

实现效果

类型
 信息
IP 地址
国家
省份
城市
运营商
UA

编写新的 JS 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 获取ip
function getIpInfo(){
    var path = 'https://2024.ipchaxun.com/'; // 实测这网址会更新，比如刚写这篇文章时接口地址是2023
    if(path !== undefined){
	    // 第一步：建立所需的对象
        var httpRequest = new XMLHttpRequest();
        // 第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.open('GET', path , true);
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var info = httpRequest.responseText;//获取到json字符串，还需解析
                var obj = JSON.parse(info)
                const ip = obj.ip;
                document.getElementById("userAgentIp").innerHTML = obj.ip;
                document.getElementById("userAgentCountry").innerHTML = obj.data[0];
                document.getElementById("userAgentRegion").innerHTML = obj.data[1];
                document.getElementById("userAgentCity").innerHTML = obj.data[2];
                document.getElementById("userAgentIsp").innerHTML = obj.data[4];
            }else{
                console.log('privacy.js - 获取信息失败. httpRequest.readyState=%d, httpRequest.status=%d',httpRequest.readyState,httpRequest.status);
            }
        };
    }else{
        console.log('privacy.js - path === undefined');
    }

    var uaInfo = navigator.userAgent;
    document.getElementById("userAgent").innerHTML = uaInfo;
}

这个文件是由洪涝 Heo https://cdn1.tianli0.top/gh/zhheo/JS-Heo@main/privacy/privacy.js 改动而来。我们不妨也将其命名为 privacy.js 吧。

页面使用

Hexo 新建页面，写入以下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
<script src="[你的 privacy.js 路径]"></script>

| 类型<div style="width:100px"> | 信息                              |
| :---------------------------: | :-------------------------------- |
|            IP 地址            | <div id="userAgentIp"></div>      |
|             国家              | <div id="userAgentCountry"></div> |
|             省份              | <div id="userAgentRegion"></div>  |
|             城市              | <div id="userAgentCity"></div>    |
|            运营商             | <div id="userAgentIsp"></div>     |
|              UA               | <div id="userAgent"></div>        |

<script type="text/javascript">getIpInfo()</script>

注意上面的代码中填写你正确的 privacy.js 路径。

本文参考