$.getJSON 和 google fonts API 停止在 Internet Explorer 中工作，jQuer

$.getJSON and google fonts API stops working in internet explorer with jQuery versions greater than 1.4.4

本文关键字：Explorer Internet 工作 jQuer getJSON google fonts API      更新时间：2023-09-26

我几乎花了一整天的时间试图找到解决这个问题的方法。

我已经成功地编写了代码，使用 Google 字体 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);
}
});

这两种方法在 Internet Explorer 中使用任何高于 1.4.4 的 jQuery 版本都失败 - 没有任何反应。

知道为什么吗？感谢您的帮助。

似乎是IE阻止了与您站点域之外的主机的连接。这是由于同源策略。对于最新和最好的浏览器来说，这通常不是什么大问题，尽管它仍然可以发生在任何浏览器上。我使用 JSFiddle 测试了您的代码，它在 Chrome 21 中抛出了有关同源的错误。

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

示例： fontApi.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
});

希望这对您有所帮助:)

相关文章：