Question

我正在实施简单的Google登录按钮，如google sign-in docs中所述，auth正常工作，但在控制台中我收到了错误：

cb=gapi.loaded_0:247 Uncaught TypeError: Cannot read property 'style' of nullG_ 
@ cb=gapi.loaded_0:247(anonymous function) 
@ cb=gapi.loaded_0:251(anonymous function) 
@ cb=gapi.loaded_0:145c.port1.onmessage 
@ cb=gapi.loaded_0:72

在检查缩小的Google代码后，看起来它试图访问未使用的DOM元素：

document.getElementById("not_signed_in"+a.El) 
//it prints: "not_signed_invrnlb3wwqpsh"

auth工作正常，但是当我尝试在angular.js应用程序中使用相同的代码时，错误正在影响我。这是重现错误的简单html代码：

<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="MY_APP_ID.apps.googleusercontent.com">
</head>
<body>
<script type="text/javascript">
function onSignIn(googleUser) {
  console.log('Name: ' + profile.getName());
}
</script>
<p>please sign in</p>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>

Answer 1

我怀疑它是由角度异步行为引起的（或任何其他框架可能表现相似）。如果是这种情况，我建议手动渲染按钮，而不是使用.g-signin2。

使用gapi.signin2.render()是控制按钮渲染时间的最简单方法。 https://developers.google.com/identity/sign-in/web/build-button#customizing_the_automatically_rendered_sign-in_button_recommended

但您也可以使用.attachClickHandler()为自定义按钮注入登录功能。 https://developers.google.com/identity/sign-in/web/build-button#building_a_button_with_a_custom_graphic

谷歌登录api试图访问不存在的DOM元素

1 个答案: