2011-12-13 12 views
12

Wykonuję żądanie JSONP w rozszerzeniu chrome (skrypt zawartości). Wszystko działa bardzo dobrze, gdy jestem uruchomiony jako strona internetowa - ładowanie pliku HTML w mojej przeglądarce - ale kiedy ładuję go jako rozszerzenie chrome, funkcja wywołania zwrotnego jsonp utworzona przez jquery wydaje się nie istnieć, gdy serwer daje odpowiedź .Żądanie JSONP w rozszerzeniu chrome, funkcja zwrotna nie istnieje?

Moja konsola mówi:

Uncaught ReferenceError: jQuery17105683612572029233_1323808231542 is not defined 

Oto moja prośba ajax:

$.ajax({ 
    url: 'http://example.com', 
    data: 
    { 
     imgUrl: this.href, 
     returnString:true 
    }, 
    dataType: "jsonp", 
    success: function(msg){ 
     newNode.src = msg.data; 
    }, 
    error: function(msg){ 
     console.log(msg.data); 
    } 
}) 
+0

celu wyjaśnienia, próbowałem poza rozszerzeniem chrom bez problemów? Czy na pewno masz uprawnienia hosta do żądanego adresu URL? –

+0

Prawidłowe, jeśli nie jest to rozszerzenie chrome - po prostu otwarcie strony z plikami javascript - działa dobrze. Prawdopodobnie powinienem wspomnieć, że jest to skrypt zawartości. –

+0

Właśnie zweryfikowaliśmy mój plik manifest.json i wygląda na poprawny. Czy istnieje jakiś sposób na ostateczne sprawdzenie? –

Odpowiedz

23

Problem jest, że odpowiedź JSONP jest złapany przez właściwą stronę, poza piaskownicy kodu JavaScript, który skrypt treści Chrome również Cię ogranicza.

jQuery17105683612572029233_1323808231542 to nazwa funkcji zwrotnej, którą wywołanie jQuery JSONP wygenerowało dynamicznie dla określonego połączenia. Ta funkcja jest definiowana w obszarze piaskownicy, do którego ma dostęp skrypt treści.

Jedynym ograniczeniem, z którego jestem świadomy, który pracował dla mnie, jest wykonanie wywołania XHR ze skryptu treści. Od wersji Chrome 13 można wywoływać wywołania XHR między domenami ze skryptów treści (całkiem fajne). W swoim pliku manifestu trzeba dodać zewnętrzny adres URL do uprawnień:

{ 
    ... 
    "permissions": [ 
     "http://example.com" 
    ] 
} 

Następnie można dokonać połączenia XHR tak:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://example.com/", true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     //handle the xhr response here 
    } 
} 
xhr.send(); 

Trzeba będzie zrobić kilka rzeczy, które jQuery robił to automatycznie, jak kodowanie wartości obiektu danych do adresu URL XHR (w twoim przypadku "imrUrl" i "returnString"), jak również konwertowanie odpowiedzi z Xhr.responeText lub Xhr.reponseXML na obiekt.

Wadą tego podejścia jest to, że jeśli udostępniasz ten kod między rozszerzeniem Chrome i czymś innym (np. Bookmarkletem), musisz teraz mieć inną logikę w przypadku użycia Chrome.

Aby uzyskać więcej informacji zobacz: Chrome Extension XHR

+4

Doskonałe wyjaśnienie. Dodam również, że po skonfigurowaniu uprawnień w manifeście można wrócić do korzystania z jQuery AJAX z JSON zamiast JSONP i to zadziała. – ron

+0

Proponuję dołączenie treści komentarza @ ron do treści odpowiedzi. –

Powiązane problemy