$.getJSON 和 google fonts API 在 jQuery 版本大于 1.4.4 的 Internet Explorer 中停止工作

Posted 2023-03-15

【中文标题】$.getJSON 和 google fonts 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

【发布时间】：2012-08-06 03:49:15

【问题描述】：

我几乎一整天都在试图找到解决这个问题的方法。

我已经使用 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);

);

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

任何想法为什么？ 感谢您的帮助。

【参考方案1】：

似乎是 IE 阻止了与您站点域之外的主机的连接。这是由于Same Origin Policy。这对于最新最好的浏览器来说通常没什么大不了的，尽管它仍然可以在任何浏览器上发生。我使用 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
);

希望对你有所帮助:)

【讨论】：

很遗憾我不能只使用 jQuery。将它与 php 混合会使我想要做的事情变得复杂。感谢您的帮助，我知道问题是如何由同源策略引起的，但奇怪的是，上述问题仅发生在 jQuery 1.4.4 以上版本（jQuery 1.4.4 一切正常）。我原以为无论使用什么 jQuery 版本，浏览器的同源策略都会阻止远程 url。也许在 jQuery 1.4.4 中有一种方法可以绕过这个相同的来源策略。知道它是什么会很有趣。无论如何，谢谢你，我会试试你的代码:)

没问题！很奇怪，它可以与 jQuery 1.4.4 一起使用，但不能与最新版本一起使用。如果是这种情况，也许您应该坚持使用旧版本。但你是完全正确的。可能是某个地方的错误导致它。