阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      前端 JavaScript 获取用户浏览器默认语言设置,自动判断跳转不同网站

      效果演示

      演示地址:https://www.gopekka.com ,

      您可以打开上面的链接,会看到 URL 会自动的跳转;中文环境的用户会跳到中文站,同理英文用户会跳到英文网站;

      因为我们只做了 2 个版本的,所以其它的语言,也是给跳到 英文网站了;

      这种方案需要注意:跳转后的网站里,一定要有一个供用户进行手动切换版本的功能,这样的体验会更好;

      效果的原理

      根据识别用户的浏览器语言,自动判断并跳转到相应的语言网页,让你的网站更加灵动。

      以下需要将代码放在 HTML 的内即可,然后自行制作多语言页面。

      代码如下

      <script type="text/javascript">
      //获取用户语言的顺序是
      //1.获取本地缓存里的内容
      //2.用户浏览器的语言设置
      //如果上面2个都没有获取到,就直接使用'en'作为用户选择的语言
      var language = localStorage.getItem('locale') || window.navigator.language.toLowerCase() || 'en'
      
      //把用户的语言写入缓存,供下次获取使用
      localStorage.setItem('locale', language)
      
      //判断用户的语言,跳转到不同的地方
      if (language.indexOf("zh-") !== -1) {
          window.location = '/zh-cn/index.html'
      } else if (language.indexOf('en') !== -1) {
          window.location = '/en/index.html'
      } else {
          //其它的都使用英文
          window.location = '/en/index.html'
      }
      </script>
      

      核心代码

      其实核心代码就是利用 navigator 的 language 属性

      navigator.language
      

      注意事项

      这种方式,是中心枢纽根据用户环境进行分发;

      这就需要开发人员自己部署多套网站,一般是这样的解决方案

      根据用户环境判断,会导致一个情况:中国大陆内的用户,设置英文为首选语言,那么访问网站会被移到对应的英文网站,这样的处理本是没有事情的,但是遇到傻逼的产品经理,可能会感觉应该默认给送到中文网站;

      第二种解决方案

      可以通过获取用户的 IP,然后把 IP 放到 IP 库里查询所在地,从而加载对应的资源,这样的方案回更加准确!有的第三方会直接返回所在国家的编码,比如 cn / en 等就更好了

      但是这样的方案也有一个弊端:如果用户通过科学上网,全局模式下,会被认为属于美国 / 日本等等(看梯子的 IP 而定了),那么会导致访问非常慢;但是这种偏差,很多翻墙的人都是了解的,没人会故意用美国的 IP 访问国内的淘宝 / 百度等网站的,除非是忘记切换回来了;

      IP 判断

      市场上有很多 IP 判断的,拿 IP 倒是非常好做的一件事;比如我现在可以拿到用户访问本网站时候的 IP;

      如下:

      目录
      目录