$ .getJSON和Google字体API在jQuery版本大于1.4.4的Internet Explorer中停止工作 [英] $.getJSON and google fonts API stops working in internet explorer with jQuery versions greater than 1.4.4

问题描述

我几乎整天都在努力寻找解决此问题的方法.

I have spent almost the whole day trying to find a solution to this problem.

我已经成功编写了使用Google字体API和jQuery 1.4.4动态检索和显示全部字体的代码. (在所有浏览器中均可使用)

I have successfully written code to dynamically retrieve and display the whole lot of fonts using the Google fonts API and jQuery 1.4.4. (works in all browsers)

我不得不将jQuery更改为1.7.2版，不幸的是注意到我编写的代码在除Internet Explorer之外的所有浏览器中都能正常工作.

I have had to change jQuery to version 1.7.2 and unfortunately noticed that the code I wrote works well in all browsers except for Internet Explorer.

我进行了一些测试，发现在Internet Explorer中，当使用高于1.4.4的jQuery版本时，$.getJSON或$ .ajax无法从Google加载JSON字体数据.

I did some testing and found that in Internet Explorer $.getJSON or $.ajax fail to load the JSON font data from Google when using jQuery versions higher than 1.4.4.

这是我正在使用的代码:

This is the code I am using:

$(function(){           

$.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXX', function(json) {

alert(json);

});
});

经过一些研究，我也尝试过这样做:

After some research I have tried this too:

$.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中，这两种方法均失败-没有任何反应.

Both methods fail in Internet Explorer using any jQuery version greater than 1.4.4 - nothing happens.

任何想法为何? 感谢您的帮助.

Any ideas why? Thanks for the help.

推荐答案

似乎是IE阻止了与您站点域外的主机的连接.这是由于相同起源政策所致.尽管最新的浏览器和最好的浏览器仍然可以在任何浏览器中使用，但这通常并不重要.我使用JSFiddle测试了您的代码，它在Chrome 21中引发了关于同一来源的错误.

It seems to be IE that is blocking connection to hosts outside of your site's domain. This is due to the Same Origin Policy. This is usually not a big deal with the latest and greatest browsers out there, although it can still occur with any browser. I tested your code using JSFiddle and it threw an error about same origin in Chrome 21.

通常，解决此问题的方法是使用JSONP.不幸的是，Google Webfonts API不支持JSONP.关于跨数据浏览器，我可以想到的最好方法是使用服务器端编程语言(例如PHP)下载JSON.从那里，您可以将JSON回显到页面，并使用$.getJSON函数在服务器上本地获取该数据.

Normally, the way to fix this is to use JSONP. Unfortunately, the Google Webfonts API does not support JSONP. The best way that I can think about getting that data cross-browser is to download the JSON using a server-side programming language such as PHP. From there, you can echo the JSON out to the page and use the $.getJSON function to grab that data locally on your server.

示例:: fontApi.php (服务器上的本地文件)

EXAMPLE: fontApi.php (local file on your server)

<?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 ...

Then use the following jQuery...

$.getJSON('fontApi.php', function(json) {
    //your code
});

希望这对您有所帮助:)

Hopefully this helps you out :)

这篇关于$ .getJSON和Google字体API在jQuery版本大于1.4.4的Internet Explorer中停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！