$ .getJSON 및 Google 글꼴 API가 jQuery 버전이 1.4.4 이상인 인터넷 익스플로러에서 작동하지 않습니다.

Question

나는이 문제에 대한 해결책을 찾기 위해 거의 하루 종일을 보냈습니다.

Google 글꼴 API 및 jQuery 1.4.4를 사용하여 전체 글꼴을 동적으로 검색하고 표시하는 코드를 작성했습니다.

jQuery를 버전 1.7.2로 변경해야하고 불행히도 내가 작성한 코드가 Internet Explorer를 제외한 모든 브라우저에서 잘 작동한다는 것을 알았습니다.

몇 가지 테스트를 통해 Internet Explorer $ .getJSON 또는 $ .ajax가 1.4.4 이상의 jQuery 버전을 사용할 때 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에서 실패

이

내가 사용하고있는 코드입니다 - 아무 반응이 없습니다.

왜 그런가? 도움 주셔서 감사합니다.

Answer 1

사이트 도메인 외부의 호스트에 대한 연결을 차단하는 것으로 보입니다. 이는 Same Origin Policy이 원인입니다. 이것은 대개 어떤 최신 브라우저에서도 발생할 수 있지만 최신의 가장 훌륭한 브라우저는별로 중요하지 않습니다. JSFiddle을 사용하여 코드를 테스트했는데 Chrome에서 동일한 출처와 관련된 오류가 발생했습니다.

일반적으로 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 
}); 

는 희망이 :)

을 당신을 도와줍니다