如何将 JQuery 实例方法作为 Google API 回调发送？

Question

以前有人知道如何发送（JQuery 插件）对象范围的方法作为 Google API 回调吗？例如，用于 PageSpeed API。

所有示例都显示您发送全局函数的名称，但我想以某种方式发送特定的实例方法（或重新查找 JQuery 对象的方法）。

这是基于他们的示例：

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

所以我想实现的是像这样的调用：

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

我正在插件的 init 方法中设置对 Google 的调用。

例如，我尝试了这个 - 但这会产生来自 Google API 的 400 Bad Request。

 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 的，但可能是围绕为什么它拒绝全局函数名称以外的任何东西。

Answer 1

jQuery 对 JSONP 有很好的支持。您应该使用它而不是自己注入脚本元素。这样您甚至不需要关心回调，响应将自动路由到您的 success 回调。

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

Answer 2

我真正不想做的是创建一些名称混乱的全局只是为了捕获每个插件实例的响应，但我认为这是唯一的方法？

这是唯一的办法。这里的问题是您正在做的是 JSONP 调用。这意味着您实际上并没有调用任何 javascript。您正在向页面动态添加新的脚本元素。该脚本元素将立即加载 url 中的 javascript，并且 javascript 将如下所示：

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

因为无论 yourCallback 是什么都必须是字符串才能工作，所以您不能传入对象。对于您想要做的事情有库支持，但在幕后，这就是它的工作方式，因为这是它唯一的工作方式。