最近开发了多语言版本的产品,遇到了这个需求,用户在注册的时候需要选择手机号的前缀来发送验证码,例如中国的前缀就是+86
,所以在用户注册的时候要获取这个用户的所在的国家,来添加前缀。
- 1.第一个解决方法就是通过
ip
地址来判断,每一个国家的网络ip
是不一样,但是这也有一个问题,就是ip
地址一旦是被包装过的,就无法获取到真实的地址,前端获取到的ip
不是公网的ip
,必须后端获取到ip地址返回给前端来判断是哪个国家。
function getUserIp(onNewIP){
let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
let pc = new MyPeerConnection({
iceServers: []
});
let noop = () => {
};
let localIPs = {};
let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
let iterateIP = (ip) => {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
};
pc.createDataChannel('');
pc.createOffer().then((sdp) => {
sdp.sdp.split('\n').forEach(function (line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
}).catch((reason) => {
});
pc.onicecandidate = (ice) => {
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};
}
getUserIp((ip)=>{
console.log(ip)//前端ip地址
})
- 2.第二种方法就是通过获取浏览器的默认语言,但这也会出现一个问题,就是安装了中文版本的浏览器,如果用户将浏览器的默认语言替换成其它语言,是获取不到的,还是会获取中文的语言。但这个不需要后端的接口,前端就可以直接搞定,将浏览器支持的语言写一个和国家的前缀对应一个库,获取到浏览器默认语言之后,在库里面查询,从而判断是哪个国家。
let lang = navigator.language;//获取浏览器默认语言。
console.log(lang)
- 3.第三种方法,使用
h5
的地理定位,但是web
的定位偏差还是挺大的。
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(position)
{
let x=position
console.log(x)
}
网友评论