$ .getJSON和google fonts API在jQuery版本大于1.4.4的Internet Explorer中停止工作
我花了差不多一整天都试图找到解决这个问题的方法。
我已成功编写代码,使用Google fonts API和jQuery 1.4.4动态检索和显示大量字体。 (适用于所有浏览器)
我不得不将jQuery更改为1.7.2版,不幸的是我注意到我编写的代码在除Internet Explorer之外的所有浏览器中运行良好。
我做了一些测试,发现在使用高于1.4.4的jQuery版本时,在Internet Explorer中,$ .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
函数在服务器上本地获取数据。
示例: fontApi.php (服务器上的本地文件)
然后使用以下jQuery …
$.getJSON('fontApi.php', function(json) { //your code });
希望这可以帮助你:)