2011-09-20 3 views
1

이전에 누군가가 (JQuery 플러그인) 객체 범위 메소드를 Google API 콜백으로 보내는 방법을 알아 냈습니까? 예 : PageSpeed ​​API의 경우JQuery 인스턴스 메소드를 Google API 콜백으로 보내는 방법은 무엇입니까?

모든 샘플은 전역 함수의 이름을 보내는 것을 보여 주지만 어떻게 든 특정 인스턴스 메서드 (또는 JQuery 개체를 다시 찾는 방법)를 보내려고합니다.

이는 their sample을 기반으로합니다

$('div.jq-google-plugin).MyGooglePlugin('callback',result); 

내 플러그인의 init 메소드 내에서 구글에 대한 호출을 설정하고 있습니다 :

var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
var query = [ 
    'url=' + url, 
    'callback=runCallbacks', 
    'key=' + settings.api_key, 
].join('&'); 
s.src = API_URL + query; 
document.head.insertBefore(s, null); 

그래서 내가 달성하고자하는

이 호출 같은 것입니다.

나는 이것을 시도했다 - 그러나 이것은 구글 API로부터 400 나쁜 요청을 만든다. 내가 정말하고 싶지 않아 무엇

var query = [ 
    'url=' + url, 
    'callback='+ encodeURI('function(result){$(\'div.jq-google-plugin\').MyGooglePlugin(\'callback\',result);}’, 
    'key=' + settings.api_key, 
].join('&'); 

만들고 일부 이름 엉망이 글로벌 다만 각 플러그인 인스턴스에 대한 응답을 잡아,하지만이 유일한 방법이라고 생각하기? (현재 작동 중입니다.)

var query = [ 
    'url=' + url, 
    'callback=myUniqueGlobalCallback', 
    'key=' + settings.api_key, 
].join('&'); 
myUniqueGlobalCallback = function(result){$('div.jq-google-plugin).MyGooglePlugin('callback',result);} 

미리 감사드립니다. 솔루션은 Google API에 맞지 않을 수도 있지만 전역 함수 이름이 아닌 다른 이유를 거부하는 이유 일 수 있습니다.

답변

1

jQuery는 JSONP를 아주 잘 지원합니다. 스크립트 요소를 직접 주입하지 말고 사용해야합니다. 이를 통해 콜백에 신경 쓸 필요조차 없으며 응답은 자동으로 success 콜백으로 라우팅됩니다. 내가 정말하고 싶지 않아 무엇

jQuery.fn.MyGooglePlugin = function() { 
    $.ajax('<url>', { 
     dataType: 'jsonp', 
     data: { 
      key: 'api-key' 
     } 
     success: function(response) { 
      console.log(response); 
     } 
    }); 
}; 
+0

감사합니다. 이것은 유망 해 보입니다 - 저는 이것을 플러그인 내에서 구현하려고 시도 할 것이고 클로저는 단순히 작동 할 것입니다. 그 스크립트 삽입 방법이 마음에 들지 않았습니다 (저는 Google의 샘플을 복사하고있었습니다!). – scipilot

+0

행운을 빈다. jQuery를 사용해도 스크립트 삽입이 계속 발생하고 이상한 이름을 가진 글로벌 메소드가 생성되지만 모든 것이 배경에 있습니다. – Anurag

1

만들고 일부 이름 엉망이 글로벌 다만 각 플러그인 인스턴스에 대한 응답을 잡아,하지만이 유일한 방법이라고 생각하기?

그게 유일한 방법입니다. 여기서 문제는 JSONP 호출이라는 것입니다. 즉 자바 스크립트를 실제로 호출하지 않는다는 의미입니다. 동적으로 새 스크립트 요소를 페이지에 추가하고 있습니다. 해당 스크립트 요소는 바로 URL에 자바 스크립트를로드 및 자바 스크립트는 다음과 같이 표시됩니다, 당신은 객체에 통과 할 수

yourCallback({data: "Some Data"}); 

이 작동하려면 문자열이어야하는 어떤 yourCallback 때문입니다. 자신이하려는 일에 대한 도서관 지원이 있지만 뒷장에서는 그것이 작동하는 유일한 방법이기 때문에 그것이 작동하는 방식입니다.

+0

통찰력에 감사드립니다. 도서관 지원이 무엇을 의미합니까? – scipilot

+0

JQuery에서는 $ .ajax를 dataType : 'jsonp'와 함께 호출 할 수 있습니다. http://api.jquery.com/jQuery.ajax/를 참조하십시오. 그것이 당신을 위해 그렇게하기 때문에 당신 자신을 맹 글링하는 이름을하는 것보다 아마 쉽습니다. 그러나 결국 그것은 똑같은 일을 끝낼 것입니다. – dlawrence

관련 문제