Google+登录按钮并不总是加载

Question

I have the following Javascript on the bottom of my index.html :

<script>
  function signInCallback(authResult) {
    if (authResult.code && authResult.access_token) {
      if (authResult['g-oauth-window']) {
        $.post('/auth/google/callback', {code: authResult.code, access_token: authResult.access_token}).done
          (function(data) {
            window.location.href = data.redir;
          });
      }
    }
  };

  (function() {
    $('#button-address').tooltip();
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
  })();
</script>

...as well as this HTML in the template of an Angular directive:

<div id="signinButton">
  <span
    class="g-signin"
    data-scope="email"
    data-clientid="CLIENTID.apps.googleusercontent.com"
    data-redirecturi="postmessage"
    data-accesstype="offline"
    data-cookiepolicy="single_host_origin"
    data-callback="signInCallback">
  </span>
</div>

This code renders a Google+ sign-in button on my Angular app's sign-in page. The problem is ~30% of the time the button does not render and the user needs to refresh the page until it appears. I believe this occurs because sometimes the #signinButton div has not been rendered before the JS is run. Does this sound like it could be the issue, and if so how can I delay the JS running until the #signinButton div has been rendered to assure the button always appears?

Answer 1

You need to modify this to work within Angular's lifecycle: document.ready is when Angular starts setting up the DOM, not when it's finished. Depending on document.ready or just dropping code in at the end of the page sets up a potential race condition because there is no guarantee that the DOM node you want to attach events to exists yet (it'll only work if the injected script's load time takes long enough for Angular to have finished rendering by the time the script arrives. Which means on any but the first, non-cached visit it's guaranteed not to work.)

Assuming the script at client:plusone.js expects to see an existing DOM node #signinButton when linked, you can ensure that the node will exist by including it as part of the directive that renders #signinButton :

var app = angular.module("foo", []);
app.directive('signinButton', function($timeout) {
  return {
    template: '<div id="signinButton">...etc...</div>',
    link: function() {
      var s = document.getElementsByTagName("script")[0];
      var url = 'https://apis.google.com/js/client:plusone.js';
      if (s.src !== url) { /* Don't re-insert the script if it's already there */
        $timeout(function() { // force this to run in the next $digest, after the directive template is rendered
          var po = document.createElement('script');
          po.type = 'text/javascript';
          po.async = true;
          po.src = url;
          s.parentNode.insertBefore(po, s);
        });
      }
    }
  }
});

(The callback function isn't time-sensitive; it can stay at the end of the document as you have now, since that's apparently where client:plusone.js expects to find it, or you could also attach it to the window object from within the directive.)

Answer 2

Since it is an AngularJS application why don't you use a directive like this one: angular-directive.g-signin ? The example is pretty self-explanatory.

Answer 3

put it your function call in $(document).ready() maybe solves your problem?

$(document).ready(function(){
    $('#button-address').tooltip();
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
})