javascript - Google sign-in button does not render when containing is loaded via ajax - Stack Overflow

admin管理员组

文章数量:1316688

I'm trying to add a google sign-in button in a hybrid app. It renders correctly when the button

<div class="g-signin2" data-onsuccess="onSignIn"></div>

is in the initial page, but when the page is not the first to be loaded (btw pages are loaded via ajax) somehow the button fails to render. For more information i'm using Framework7 but i don't believe the issue is related to the framework but to my faulty logic. I'm following the instructions form google developers.

I'm trying to add a google sign-in button in a hybrid app. It renders correctly when the button

<div class="g-signin2" data-onsuccess="onSignIn"></div>

is in the initial page, but when the page is not the first to be loaded (btw pages are loaded via ajax) somehow the button fails to render. For more information i'm using Framework7 but i don't believe the issue is related to the framework but to my faulty logic. I'm following the instructions form google developers.

• javascript
• ajax
• google-signin
• html-framework-7

Share Improve this question Follow asked Nov 16, 2015 at 12:09 vhoxhavhoxha 6022 silver badges1010 bronze badges 1

• 2 Just include 'apis.google./js/platform.js' script after your ajax call is plete. – Valentin Podkamennyi Commented Nov 17, 2015 at 12:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

It doesn't work when the div element is loaded dynamically because the Google Sign-In script looks up the tag with the g-signin2-class upon execution, which it won't find since it isn't loaded into the DOM tree yet.

Instead, you can use the gapi.signin2.render function to render the button after your AJAX call is pleted. For example, if your placeholder tag is has the id div_tag_id, in JavaScript:

gapi.signin2.render("div_tag_id", {
    "scope": "profile email openid",
    "width": 200,
    "height": 40,
    "longtitle": true,
    "theme": "dark",
    "onsuccess": function (googleUser) {
        // Called when the user signs in
    },
    "onfailure": function (e) {
        console.warn("Google Sign-In failure: " + e.error);
    }
});

---

• Reference

You can use onPageInit as described in Framework7 documentation:

myApp.onPageInit(pageName, function(page) {
  var script = document.createElement('script');
  script.src = 'https://apis.google./js/platform.js';
  document.body.appendChild(script);
});

With google Chrome in incognito mode, you’re going to get that this works

本文标签： javascriptGoogle signin button does not render when containing is loaded via ajaxStack Overflow