$.getJSON и API шрифтов Google перестают работать в Internet Explorer с версиями jQuery выше 1.4.4

Я потратил почти весь день, пытаясь найти решение этой проблемы.

Я успешно написал код для динамического извлечения и отображения всего множества шрифтов, используя API шрифтов Google и jQuery 1.4.4. (работает во всех браузерах)

Мне пришлось изменить jQuery на версию 1.7.2, и, к сожалению, я заметил, что написанный мной код хорошо работает во всех браузерах, кроме Internet Explorer.

Я провел некоторое тестирование и обнаружил, что в Internet Explorer $.getJSON или $.ajax не удается загрузить данные шрифта JSON из Google при использовании версий jQuery выше 1.4.4.

Это код, который я использую:

$(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 с любой версией jQuery выше 1.4.4 — ничего не происходит.

Есть идеи, почему? Спасибо за помощь.


javascript jquery google-font-api internet-explorer
person effectica    schedule 08.08.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, что IE блокирует подключение к хостам за пределами домена вашего сайта. Это связано с Политикой единого происхождения. Обычно это не имеет большого значения для новейших и лучших браузеров, хотя это все еще может произойти с любым браузером. Я проверил ваш код с помощью JSFiddle, и он выдал ошибку о том же происхождении в Chrome 21.

Обычно способ исправить это — использовать JSONP. К сожалению, Google Webfonts API не поддерживает JSONP. Лучший способ, который я могу придумать для получения этих данных в разных браузерах, — это загрузить JSON с помощью языка программирования на стороне сервера, такого как PHP. Оттуда вы можете вывести 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
});

Надеюсь, это поможет вам :)

person Kyle Ross    schedule 08.08.2012
comment
Жаль, что я не могу просто использовать jQuery. Смешивание его с php усложняет то, что я пытаюсь сделать. Я ценю вашу помощь и вижу, как проблема может быть вызвана той же политикой происхождения, однако странно, что вышеуказанная проблема возникает только с jQuery выше версии 1.4.4 (с jQuery 1.4.4 все работает нормально). Я бы подумал, что та же политика происхождения браузера будет блокировать удаленные URL-адреса независимо от используемой версии jQuery. Возможно, в jQuery 1.4.4 есть способ обойти ту же самую политику происхождения. Было бы интересно узнать, что это такое. В любом случае, спасибо, я попробую ваш код :) - person effectica; 09.08.2012
comment
Без проблем! Довольно странно, что он будет работать с jQuery 1.4.4, но не с последними версиями. Если это так, возможно, вам следует придерживаться более старой версии. Но в этом вы совершенно правы. Это может быть ошибка где-то, вызывающая это. - person Kyle Ross; 12.08.2012