根据 IP 位置设置A链接，button跳转

有些业务不是要“禁止访问”，而是要做更轻量的“地区分流”：同一个页面里，来自不同国家/地区的用户点击链接或按钮时，应该去往不同的目标地址。这种分流通常用于：下载地址分配、不同地区的支付入口、不同客服系统、不同站点（国际站/本地站）的入口切换等。

这篇文章只讲一个核心：前端在页面加载时请求 GET https://my.ipin.io/info 获取访问者国家代码 country，然后把 <a> 的 href 或 <button> 的点击跳转地址设置成对应地区的 URL。例如接口返回：

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

1）逻辑与工作原理（2 段）

第一段：流程
页面加载 → 前端立刻请求 https://my.ipin.io/info → 获取 country → 根据你的规则选择目标 URL（例如 TW 用 A 地址 1、US 用 A 地址 2、其他地区用默认地址）→ 将链接或按钮的“目的地”更新为目标 URL。用户点击时，才会去到对应地址。

第二段：为什么建议先写默认地址，再按地区覆盖
因为前端环境不稳定：网络、CORS、广告拦截插件、接口超时都可能导致拿不到 country。更稳妥的做法是：页面里先写一个默认可用的 URL（通用落地页），脚本成功拿到地区后再覆盖成地区专属 URL。这样就算接口失败，页面仍然能正常跳转，不会出现“点了没反应/地址为空”的问题。

2）代码实现（超级简单，A 和 button 分开讲）

2.1 A 链接（使用 id）：根据 country 设置 href

场景：页面里只有一个关键链接，你希望它根据地区指向不同地址。下面示例只演示最简单的逻辑：如果是 TW 用 TW 链接，否则用默认链接。

<a id="geoLink" href="https://example.com/default">立即前往</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    const a = document.getElementById("geoLink");
    if (a) a.href = target;
  } catch (e) {
    // 失败就保持默认 href
  }
})();
</script>

2.2 A 链接（使用 class）：批量根据 country 设置 href

场景：页面里有多个链接都要做地区分流。最简单的方式就是：给它们同一个 class，然后统一更新。下面示例依旧保持极简：TW 用 TW 链接，其他地区用默认链接。

<a class="geo-link" href="https://example.com/default">下载入口</a>
<a class="geo-link" href="https://example.com/default">购买入口</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    document.querySelectorAll(".geo-link").forEach(function (el) {
      el.href = target;
    });
  } catch (e) {}
})();
</script>

2.3 Button（使用 id）：点击后根据 country 跳转

场景：按钮不是链接本身，所以需要你在前端绑定点击事件。下面示例同样只保留最核心逻辑：先根据 country 选目标 URL，然后在按钮点击时跳转到该 URL。

<button id="geoBtn" type="button">点击跳转</button>

<script>
(async function () {
  let target = "https://example.com/default"; // 默认地址

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {
    // 失败就用默认地址
  }

  const btn = document.getElementById("geoBtn");
  if (btn) btn.onclick = function () { window.location.href = target; };
})();
</script>

2.4 Button（使用 class）：批量绑定点击跳转

场景：页面里有多个按钮都需要按地区跳转。最简单做法：统一 class，然后循环绑定点击事件。注意：按钮没有“默认 href”，所以建议在脚本里先准备一个默认 URL，避免接口失败时按钮没反应。

<button class="geo-btn" type="button">按钮 1</button>
<button class="geo-btn" type="button">按钮 2</button>

<script>
(async function () {
  let target = "https://example.com/default"; // 默认地址

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {}

  document.querySelectorAll(".geo-btn").forEach(function (btn) {
    btn.onclick = function () { window.location.href = target; };
  });
})();
</script>

2.5 多地区（TW、US…）：用映射表“直接设置目标 URL”（最短可用）

最简单的规则：先准备默认 URL，再用映射表 map 按国家代码覆盖。有映射就用映射，没有映射就用默认。重点是：算出 target 以后，要立刻把它写进 A 的 href 或 button 的点击事件。

2.5.1 用在 A 链接（id）：直接设置 href

<a id="geoLink" href="https://example.com/default">立即前往</a>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = map[info.country] || defaultUrl;

    document.getElementById("geoLink").href = target; // ✅ 关键：把 target 写进 href
  } catch (e) {
    // 失败就保持默认 href
  }
})();
</script>

2.5.2 用在 button（id）：点击时跳转到 target

<button id="geoBtn" type="button">点击跳转</button>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
  let target = defaultUrl;

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    target = map[info.country] || defaultUrl;
  } catch (e) {}

  document.getElementById("geoBtn").onclick = function () {
    window.location.href = target; // ✅ 关键：点击时用 target 跳转
  };
})();
</script>

3）在 WordPress / Joomla / Magento / Shopify 等中实现（前端方式 + 代码展示）

这类“按地区改 A 链接 / 按钮跳转目的地”的实现，本质是把脚本放到全站公共 Head 或布局文件中，让它尽可能早执行。你不需要动服务端逻辑，只要能让脚本在页面加载时跑起来，就可以在用户点击之前把目的地准备好。

3.1 WordPress

用“插入页眉页脚脚本”的插件，把脚本贴到 Header（全站生效）
或在主题文件 header.php 的 </head> 前插入脚本

3.2 Joomla! / Joomla

在当前模板的 index.php 中找到 <head>，把脚本贴到 </head> 前
或使用模板提供的“自定义 head 代码”入口（不同模板略有差异）

3.3 Magento

把脚本加到主题全局 head（主题/layout 的 head 区域）
目标是全站统一输出，便于你维护地区映射规则

3.4 Shopify

Online Store → Themes → Edit code
找到 theme.liquid，在 </head> 前插入脚本（全站生效）

3.5 通用规律

能编辑全局 <head> 或布局文件的系统，都可以用同样方式做“按 IP 地区设置链接/按钮目的地”
建议保留默认 URL，确保外部接口失败时仍然可用

4）总结

> 页面加载时请求 https://my.ipin.io/info 获取 country，再根据 country 选择目标 URL，并分别更新 A 链接的 href 或按钮点击跳转地址，从而实现“按 IP 地区分流到不同目的地”的前端方案。

实务上最关键的两点是：第一，脚本尽量放在 head 靠前，尽早完成目的地设置；第二，永远准备一个默认 URL，避免接口失败导致链接无效或按钮无响应。只要你把地区映射规则维护好，这套方案就能稳定用于下载入口、支付入口、客服入口等常见场景。

5）常见问题

Q1：为什么我点了按钮没跳转？

常见原因是脚本没执行或接口请求失败。建议先准备默认 URL（示例里都做了），并在开发时临时 console.log(info) 确认是否拿到了 country。

Q2：为什么建议 A 链接先写默认 href？

因为即使地区判断失败，用户仍然能通过默认链接正常跳转。否则你会遇到“接口失败 → 链接没被设置 → 用户无路可走”的问题。

Q3：可以让按钮在新窗口打开吗？

可以，把 window.location.href = target 换成 window.open(target, "_blank") 即可。一般放在点击事件里不会被浏览器拦截。

Q4：如果要支持 TW、US、JP 等多个地区怎么办？

用映射表是最简单可维护的方式：{ TW: "...", US: "..." }。有匹配就用对应 URL，没有匹配就用默认 URL。

Q5：CORS 会影响这套方案吗？

会。如果浏览器无法跨域读取 https://my.ipin.io/info 的 JSON，就拿不到 country，最终只能走默认 URL。上线前建议先在控制台验证接口请求是否成功。