addEventListener('fetch', event => {
const someHTML = `
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP信息查询</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: Arial, sans-serif;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
body {
background-image: url('https://ipgeo-bingpic.hf.space');
background-size: cover;
background-position: center;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
flex: 1;
width: 100%;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
#search-container {
margin-bottom: 20px;
display: flex;
gap: 10px;
}
#search-input {
padding: 10px;
width: 250px;
border-radius: 5px;
border: none;
font-size: 1em;
}
#search-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background: #007bff;
color: white;
font-size: 1em;
cursor: pointer;
}
#search-button:hover {
background: #0056b3;
}
#ipgb {
background: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
max-width: 80%;
width: 320px;
text-align: left;
font-size: 1.1em;
line-height: 1.5em;
margin-top: 20px;
word-wrap: break-word;
word-break: break-all;
}
#footer {
width: 100%;
text-align: center;
font-size: 0.9em;
color: #ccc;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
#footer a {
color: #ccc;
text-decoration: none;
}
#footer a:hover {
color: #e0e0e0;
text-decoration: underline;
}
.highlight {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>IP信息查询</h1>
<div id="search-container">
<input type="text" id="search-input" placeholder="输入IP地址">
<button id="search-button">查询</button>
</div>
<div id="ipgb">正在加载当前IP的信息...</div>
</div>
<div id="footer">
<span>Copyright ©<span id="year"></span> <a href="/">IP信息查询</a></span> |
<span><a href="https://linux.do/u/f-droid" target="_blank" rel="nofollow">Powered by F-droid</a></span>
</div>
<script>
const API_URL = "$API_URL";
var gbip = '';
function fetchIPData(ip, isCurrent) {
if (typeof isCurrent === 'undefined') {
isCurrent = true;
}
fetch(API_URL + '/' + ip)
.then(function(response) {
return response.json();
})
.then(function(data) {
var tag = document.getElementById("ipgb");
var output = [];
var title = isCurrent
? "<span class='highlight'>当前IP的信息</span>"
: "<span class='highlight'>查询IP " + (data.ip || '未知') + " 的信息</span>";
output.push(title);
output.push("IP: " + (data.ip || '未提供'));
output.push("类型: " + (data.type || '未提供'));
output.push("国家: " + (data.country && data.country.name ? data.country.name : '未提供'));
output.push("地区: " + (data.regions ? data.regions.join(", ") : '未提供'));
output.push("注册国家: " + (data.registered_country && data.registered_country.name ? data.registered_country.name : '未提供'));
output.push("AS: " + (data.as && data.as.name ? data.as.name : '未提供'));
output.push("ASN: " + (data.as && data.as.number ? data.as.number : '未提供'));
output.push("经度: " + (data.location && data.location.longitude ? data.location.longitude : '未提供'));
output.push("纬度: " + (data.location && data.location.latitude ? data.location.latitude : '未提供'));
output.push("IP段: " + (data.addr || '未提供'));
tag.innerHTML = output.filter(function(line) {
return !line.includes('未提供');
}).join("<br>");
if (data.ip !== gbip) {
tag.style.color = '';
}
gbip = data.ip;
})
.catch(function(error) {
document.getElementById("ipgb").innerText = "获取数据失败，请稍后再试。";
console.error("错误:", error);
});
}
fetchIPData('');
document.getElementById("search-button").addEventListener("click", function() {
var ip = document.getElementById("search-input").value.trim();
if (ip) {
fetchIPData(ip, false);
}
});
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>`;
event.respondWith(new Response(someHTML.replace('$API_URL', API_URL), {
headers: { 'content-type': 'text/html;charset=UTF-8' }
}));
});
后端是 分享一个自建的高精度且注重隐私的IP地理位置API查询接口。可以在抱抱脸空间一键私有化部署！可以实现Cloudflare workers优雅且安全的反代GitHub！ ，需要的可以去自行搭建
