我们之所以使用Google API服务诸如jQuery和Web Fonts之类的库,是因为它可以通过Google可靠的基础架构快速提供服务。 它几乎在所有地方都被使用,以至于某些用户可能已经在其浏览器中存储了缓存,这使得库的加载速度甚至更快。
不幸的是,在中国情况并非如此。 中国政府于2014年关闭了对包括Google API在内的许多Google服务的访问。由于您无法访问Google托管的jQuery和Web字体,很有可能您的网站在中国可能会部分损坏 。
在本文中,我们将了解如何绕过中国的“数字”长城,因此我们的网站可以像在中国境外一样运作。 我们将使用与Google字体和库类似的替代字体库,但是首先我们需要采取一些措施来识别来自中国的用户。
识别用户位置
首先,我们将需要找到访客的来源,并使用WIPMania API ,该API允许检索访客的地理位置,包括他们的国家/地区名称:
$.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {
swal('You are from', data.address.country);
});
我们使用jQuery $.getJSON
调用API。 然后,我们传递data.address.country
,它应该告诉我们访问者来自何处。 这是一个演示。
提供替代的Web字体源
因此,现在我们可以检索访问者的位置,我们将用Useso库替换Google字体, 该类 CDN服务可反映Google API的字体和库,以服务来自中国的访问者。
在此阶段,我们的字体样式仍指向Google API:
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
我们将用JavaScript函数替换link
元素中的href
。
function replaceGoogleCDN() {
$('link').each(function(){
var $intial = $(this).attr('href'),
$replace = $intial.replace('//fonts.googleapis.com/', '//fonts.useso.com/');
$(this).attr('href', $replace);
});
}
此函数代替指向//fonts.useso.com/
每个链接来代替指向Google API地址//fonts.googleapis.com/
。
仅当访问者来自中国的国际国家代码CN
,该功能才会运行。
$.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {
if ( data.address.country_code == 'CN' ) {
replaceGoogleCDN();
}
});
我们都准备好了。 现在,来自中国的访客将通过//fonts.useso.com/
获得字体,而中国政府并未阻止它。