Я пытаюсь добавить кнопку входа в Google в гибридное приложение. Он отображается правильно, когда кнопка
<div class="g-signin2" data-onsuccess="onSignIn"></div>
находится на начальной странице, но когда страница загружается не первой (кстати, страницы загружаются через ajax), кнопка почему-то не отображается. Для получения дополнительной информации я использую Framework7, но я не думаю, что проблема связана с фреймворком, а с моя ошибочная логика. Я следую инструкциям разработчиков Google.
Это не работает, когда элемент div загружается динамически, потому что скрипт входа в систему Google ищет тег с классом g-signin2 при выполнении, который он не найдет, поскольку он еще не загружен в дерево DOM.
Вместо этого вы можете использовать функцию gapi.signin2.render для отображения кнопки после завершения вызова AJAX. Например, если ваш тег-заполнитель имеет идентификатор div_tag_id, в 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);
}
});
Вы можете использовать onPageInit, как описано в документации Framework7:
myApp.onPageInit(pageName, function(page) {
var script = document.createElement('script');
script.src = 'https://apis.google.com/js/platform.js';
document.body.appendChild(script);
});
С Google Chrome в режиме инкогнито вы убедитесь, что это работает.
