每次页面加载时运行的按钮回调函数答案

【问题标题】：Button callback function running every page load每次页面加载时运行的按钮回调函数
【发布时间】：2013-07-17 18:24:44
【问题描述】：

我有一个按钮：

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="onSignInCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

按下时，它会运行一个函数...此时会关闭，发出 AJAX 帖子，并在控制台中打印一些文本（只是为了测试，这部分有效）：

<script type="text/javascript">
var helper = (function() {
    return {
        onSignInCallback: function(data) {

            var dataString = 'access_token=' + data['access_token'];

            $.ajax({
                type: "POST",
                url: "getdetails",
                data: dataString,
                dataType: 'html',
                timeout: 0,
                statusCode: {
                    200: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log("There was an error");
                    }
                }
            });
        }
    };
})();   

function onSignInCallback(data) {
  helper.onSignInCallback(data);
}
</script>

但是，问题是每次我在不单击按钮的情况下刷新页面时，我的函数都会运行，并且通过 AJAX 发布数据并将文本打印到控制台中。

知道为什么会这样吗？我想要它（显然）所以这只会在他们点击按钮时发生。

我正在使用 Google Plus API，代码修改自：

https://github.com/googleplus/gplus-quickstart-javascript/blob/master/index.html#L44

【问题讨论】：

奇怪。有时我也会在 chrome 中发生这种情况。

标签： javascript google-plus

【解决方案1】：

根据该指令的文档：

data-callback - 全局命名空间中的函数，在呈现登录按钮时调用，在登录流程完成后也会调用。呈现按钮时，会发生回调以检查用户是否先前授权应用程序并应自动登录。

根据设计，当按钮被渲染（即页面加载）和点击按钮时，回调将运行。

一种解决方法是在第一次运行时设置一个全局布尔值。

<script type="text/javascript">
var first_run = true;
var helper = (function() {
    return {
        onSignInCallback: function(data) {

            var dataString = 'access_token=' + data['access_token'];

            $.ajax({
                type: "POST",
                url: "getdetails",
                data: dataString,
                dataType: 'html',
                timeout: 0,
                statusCode: {
                    200: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log("There was an error");
                    }
                }
            });
        }
    };
})();   

function onSignInCallback(data) {
  if(!first_run) {
      helper.onSignInCallback(data);
  }
  first_run = false;
}
</script>

【讨论】：

很有效。我不知道这是否是使用 Google Plus API 做事的正确方法。但是，是的，它现在似乎可以工作了 :) 谢谢。

【解决方案2】：

在the Google Plus documentation:

如果用户之前同意允许您的应用程序通过此按钮或代表同一应用程序的另一个按钮进行访问，则他们会自动登录。一旦登录按钮被渲染并传递了一个回调函数，就会自动调用回调函数带有访问令牌的新授权对象。

【讨论】：

【解决方案3】：

我也得到了这个。在我的全局 onSignInCallBack(authResult) 函数中，我将发出 ajax 请求的调用包含在 if 语句中，该语句检查 authResult['access_token'] 中的值。我正在使用 AngularJs 并将我的 Ajax 调用移到我的控制器中。由于您没有使用 AngularJS，因此您可以将 gplusController().onSignInCallback(..) 行替换为您的 AJAX 调用。

function onSignInCallback(authResult){
    if (authResult['access_token']) {
    var afToken = document.getElementById('afToken').getAttribute('data-afToken');
    gplusController().onSignInCallback(authResult, afToken);
   }
 }

【讨论】：