javascript - 如何动态加载 google client.js

Question

这是我第一次在 stackoverflow 上发帖。

我的问题很简单(我认为)。我的任务是允许用户使用 Facebook、Google Plus、LinkedIn 和 Twitter 进行注册。现在，我想要做的是当用户单击“社交网络”按钮时，它会将他们重定向到注册页面，并带有一个标志，用于确定他们想要使用哪个社交网络。这里没问题。

我想根据他们选择的社交网络动态加载每个 API。

我在动态加载 Google JS API 时遇到问题。在 here 中找到的示例以直接的方式加载 client.js。如果我按照示例代码进行操作，我没有问题。但是我想动态加载它。

我尝试使用 $.ajax、$.getScript，甚至尝试将脚本添加到页面，就像您异步调用 Google Analytics 的方式一样。以上均无效。我的回调函数并非一直被调用。此外，如果我从 $.ajax 和 $.getScript 的回调函数中调用 setApiKey，则 gapi.client 为 NULL。我不知道下一步该怎么做。

无效的代码:

(function () {
var gpjs = document.createElement('script'); gpjs.type = 'text/javascript'; gpjs.async = false;
gpjs.src = 'https://apis.google.com/js/client.js?onload=onClientLoadHandler';
var sgp = document.getElementsByTagName('script')[0]; sgp.parentNode.insertBefore(gpjs, sgp);})();

使用 $.getScript

$.getScript("https://apis.google.com/js/client.js?onload=onClientLoadHandler", function () {
console.log("GP JS file loaded.");
SetKeyCheckAuthority();});

使用 $.ajax

$(document).ready(function () {
$.ajax({
    url: "https://apis.google.com/js/client.js?onload=onClientLoad",
    dataType: "script",
    success: function () {
        console.log("GP load successful");
        SetKeyCheckAuthority();
    },
    error: function () { console.log("GP load failed"); },
    complete: function () { console.log("GP load complete"); }
});});

我可以知道动态调用此 js 文件的正确方法是什么吗？任何帮助，将不胜感激。谢谢。

Answer 1

好的，我刚刚想到了一个解决方案，但我认为这是一个糟糕的解决方案。请告诉我您的想法。

我使用$.getScript 来加载js文件

$.getScript("https://apis.google.com/js/client.js?onload=onClientLoadHandler", function () {
console.log("GP JS file loaded.");
SetKeyCheckAuthority();});

然后在我的 SetKeyCheckAuthority 函数上我设置了一个条件，当 gapi.client 为 null 时 1 秒后调用自身。

function SetKeyCheckAuthority() {
if(null == gapi.client) {
    window.setTimeout(SetKeyCheckAuthority,1000);
    return;
}

//set API key and check for authorization here }