控制依赖于地理 IP 的 HTML 元素

Posted 2023-02-23

【中文标题】控制依赖于地理 IP 的 HTML 元素

【英文标题】：Controlling HTML elements dependent on geo IP

【发布时间】：2012-09-04 10:11:22

【问题描述】：

我们有一个移动网页here，它将在不同国家/地区可用，在每个国家/地区内，我们需要能够根据访问者的 IP 更改以下内容：

div#container 拥有不同的背景图片 div#buttons 被隐藏，div#buttons-2 被显示

使用名为GeoIP 的javascript，到目前为止，我们能够识别访问者的国家并以两个字符的ISO 3166-1 形式获取函数名称，以用于控制其他JavaScript 函数。例如，我来自英国，所以当我访问该页面时，JavaScript 会生成以下代码：

function geoip_country_code()  return 'GB'; 

在 html 中目前有一个脚本说：

    if (geoip_country_code() == 'GB') 
    
      alert("Hello, you are in Great Britain");
    

我们想开发它，以便我们可以操纵指定元素的 CSS，但我们并不精通 JavaScript，所以这是我们需要帮助的地方。

这是嵌入页面的 JavaScript：

<script src="http://j.maxmind.com/app/country.js" charset="ISO-8859-1"></script>

以下是我们要控制的 HTML 元素：

<div id="container">
            <div id="buttons">
                <a href="#" target="blank">
                    <div class="button youtube"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button facebook"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button web"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button appstore"></div>
                </a>
            </div>
        </div>

【问题讨论】：

我完全不精通 JavaScript，所以我现在正在摸索一些尝试。我所尝试的只是测试 JS 是否通过以下方式工作： if (geoip_country_code() == 'GB') alert("Hello, you are in Great Britain");

【参考方案1】：

var map = 
    'GB': 
        'background': 'img1.jpg',
        'buttons': 'show',
        'buttons2': 'hide'
    
;

var country = geoip_country_code();
$('#container').css('background', map[country].background);
$('#buttons')[map[country].buttons]();
$('#buttons2')[map[country].buttons2]();

这是一个使用 jQuery 的示例。我希望您了解使用“映射对象”的想法（那里只有英国，但可以根据需要添加国家/地区），然后您可以在此基础上执行您的操作。

【讨论】：

太好了，非常感谢。对理解地图的这个概念很有帮助。我可以用这种方式更改 元素的 href 吗？

我曾尝试使用此代码：'href': 'http://www.youtube.com/watch?v=12345678' 和 $("a.youtube").attr('href', map[country].href);，但当它读取 YouTube 链接时我得到 uncaught syntaxerror unexpected string。有什么想法吗？

嗯，不抱歉，我没有看到问题：/你能做一个 jsfiddle 吗？

问题已解决，感谢您的帮助。非常感谢！

【参考方案2】：

根据返回的国家代码，你应该改变样式表（css）

如果返回 GB 然后加载 css where div#container 有不同的背景图片 div#buttons 被隐藏并 div#buttons-2 被显示

反之亦然。

或者你可以简单地用 javascript 做到这一点

创建一个函数： 设置容器的背景图片， 隐藏 div#button， 显示 div#buttons-2

还有另一个反之亦然的功能，例如： 设置容器的另一个背景图像， 显示 div#button， 隐藏 div#buttons-2

现在您可以调用相应的函数来显示如下： 如果返回 'US' 调用 func1， 如果返回 'UK' 调用 func2