Yêu cầu JSONP trong tiện ích chrome, chức năng gọi lại không tồn tại?

Question

Tôi đang thực hiện yêu cầu JSONP trong tiện ích mở rộng của chrome (tập lệnh nội dung). Mọi thứ hoạt động rất tốt khi tôi chạy dưới dạng trang web tải tệp HTML trong trình duyệt của mình, nhưng khi tôi tải tệp đó dưới dạng tiện ích chrome, hàm gọi lại jsonp được tạo bởi jquery dường như không tồn tại khi máy chủ trả lời .

console của tôi nói:

Uncaught ReferenceError: jQuery17105683612572029233_1323808231542 is not defined 

Đây là yêu cầu ajax của tôi:

$.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); 
    } 
}) 

Answer 1

Vấn đề được rằng phản ứng JSONP đang được đánh bắt bởi các trang thực tế, bên ngoài của mã JavaScript sandboxed rằng tập lệnh nội dung Chrome cũng giới hạn bạn.

jQuery17105683612572029233_1323808231542 là tên của hàm gọi lại mà cuộc gọi JSONP của jQuery đã được tạo động cho cuộc gọi cụ thể. Chức năng này đang được xác định trong khu vực hộp cát mà tập lệnh nội dung có quyền truy cập.

Cách giải quyết duy nhất mà tôi biết, làm việc cho tôi, là thực hiện cuộc gọi XHR từ tập lệnh nội dung. Kể từ Chrome 13, bạn có thể làm cho XHR gọi tên miền chéo từ các tập lệnh nội dung (khá thú vị). Trong file manifest của bạn, bạn cần phải thêm URL bên ngoài để các điều khoản:

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

Sau đó, bạn có thể thực hiện cuộc gọi XHR như vậy:

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(); 

Bạn sẽ cần phải làm một số trong những điều mà jQuery đã làm tự động cho bạn, như mã hóa các giá trị của đối tượng dữ liệu vào URL XHR (trong trường hợp của bạn là "imrUrl" và "returnString") cũng như chuyển đổi phản hồi từ xhr.responeText hoặc xhr.reponseXML thành một đối tượng.

Nhược điểm của phương pháp này là nếu bạn đang chia sẻ mã này giữa tiện ích mở rộng của Chrome và một thứ khác (như dấu trang), bạn phải có logic khác nhau cho trường hợp sử dụng Chrome.

Để biết thêm thông tin, hãy xem: Chrome Extension XHR