我几乎花了一整天的时间试图找到这个问题的解决方案。
我已经成功编写了使用 Google 字体 API 和 jQuery 1.4.4 动态检索和显示全部字体的代码。 (适用于所有浏览器)
我不得不将 jQuery 更改为 1.7.2 版本,不幸的是我注意到我编写的代码在除 Internet Explorer 之外的所有浏览器中都运行良好。
我做了一些测试,发现在 Internet Explorer 中,当使用高于 1.4.4 的 jQuery 版本时,$.getJSON 或 $.ajax 无法从 Google 加载 JSON 字体数据。
这是我正在使用的代码:
$(function(){
$.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXX', function(json) {
alert(json);
});
});
经过一番研究后我也尝试过这个:
$.ajax({
type: "get",
url: "https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXXXX",
cache:false,
dataType:'json',
success: function(data){
alert(data);
}
});
在使用任何高于 1.4.4 的 jQuery 版本的 Internet Explorer 中,这两种方法都会失败 - 没有任何反应。
有什么想法吗?
谢谢您的帮助。
IE 似乎阻止了与您站点域之外的主机的连接。这是由于同源政策。对于最新最好的浏览器来说,这通常不是什么大问题,尽管任何浏览器仍然可能发生这种情况。我使用 JSFiddle 测试了您的代码,它在 Chrome 21 中引发了有关相同来源的错误。
通常,解决这个问题的方法是使用 JSONP。不幸的是,Google Webfonts API 不支持 JSONP。我能想到的跨浏览器获取数据的最佳方法是使用服务器端编程语言(例如 PHP)下载 JSON。从那里,您可以将 JSON 回显到页面并使用$.getJSON
函数在您的服务器上本地获取该数据。
EXAMPLE: 字体API.php(服务器上的本地文件)
<?php
$json = file_get_contents('https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXX');
die($json); // prints JSON to the screen that jQuery can use
?>
然后使用以下 jQuery...
$.getJSON('fontApi.php', function(json) {
//your code
});
希望这对您有帮助:)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)