Проверьте, использует ли пользователь браузер в Китае или нет

Китай блокирует API Google с 2014 года, что означает длительное время загрузки веб-сайтов с API-интерфейсами Map или Fonts API. Для этого есть обходной путь, поскольку fonts.useso.com также предоставляет ту же библиотеку шрифтов (см. http://libs.useso.com/, http://fonts.useso.com/ соответственно).

Следующий код

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>

может быть изменен на

<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>

и это будет хорошо работать в Китае.

Но что, если я хочу динамически выбрать источник, из которого я хочу загрузить API, учитывая местоположение, откуда пользователь посещает?

4 ответа

Вы можете использовать сторонний сервис для определения местоположения пользователя и переключения вашего шрифта.

Например, вы можете интегрировать http://userinfo.io/, который является бесплатным. В этом случае местоположение определяется на основе IP-адреса, поэтому, если китаец приедет из Европы, он будет находиться в Европе, и шрифты Google будут загружены.

Вставьте это в свой <head>:

<script type="text/javascript" href="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>

<script type="text/javascript">
UserInfo.getInfo(function(data) {
  // the "data" object contains the info
  if (data.country.code == 'CN') {
    // load your fallback fonts
  } else {
    // Load your google fonts
  }
}, function(err) {
  // the "err" object contains useful information in case of an error
});
</script>

Отказ от ответственности: я написал и поддерживаю http://userinfo.io/

Часовой пояс сделает свое дело:

var offset = new Date().getTimezoneOffset();
if(offset/60 == -8){
    console.log('Hello from China!');
}

Обратите внимание, что это игнорирует клиентов с неправильной конфигурацией часов, но может охватывать большинство сценариев.

Шрифты Google теперь размещаются на серверах в Китае, что устраняет медленное время загрузки. (По состоянию на август 2016 года) Смотрите мой ответ здесь для полного описания.

Я наткнулся на другое решение, которым я хотел бы поделиться. Я думаю, что это круто, поскольку не нужно включать библиотеку, а получать информацию только через запрос ajax.

function replaceGoogleCDN() {
  $('link').each(function(){
    var $intial  = $(this).attr('href'),
        $replace = $intial.replace('//fonts.googleapis.com/', '//fonts.useso.com/');
        $(this).attr('href', $replace);
  });
}

$.getJSON('//api.wipmania.com/jsonp?callback=?', function (data) { 
  if ( data.address.country_code == 'CN' ) {
    replaceGoogleCDN();
  }
});

РЕДАКТИРОВАТЬ: Не удивительное решение, хотя, если вы находитесь на HTTPS, так как вы не можете загрузить из источника http и wipmania, кажется, не имеет действительного сертификата ssl.

Источник

Другие вопросы по тегам