Google 如果父元素被隐藏，登录按钮不会在 Firefox 中加载

Question

我正在使用 Google 登录 JavaScript 客户端动态创建 G+ 登录按钮。代码看起来像这样：

<div id="googleSignInButton">
    <span class="g-signin"
        data-scope="openid email"
        data-clientid="{{flow.client_id}}"
        data-redirecturi="{{flow.redirect_uri}}"
        data-accesstype="offline"
        data-cookiepolicy="single_host_origin"
        data-callback="googleLoginCallback"
        data-approvalprompt="force">
    </span>
</div>

它工作正常。但在一种特定情况下，它不会加载。当使用 firefox 并且它的父元素被隐藏时（显示：none），当它的父元素被显示时它根本不显示。

例如检查 jsfiddle（检查 html 评论）：

https://jsfiddle.net/uh6cjt7a/3/

Answer 1

当运行在Firefox上，如果元素是"invisible"，当你加载google API时，它会直接设置width和height属性为1px元素的样式。无法通过 CSS.

更改它

一种解决方案是在使元素可见后显式初始化 API。您可以使用 go 方法来完成。

<script >
  window.___gcfg = {
    lang: 'en-US',
    parsetags: 'explicit' //Configure to initialize explicitly
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

而他们，在 javascript 这样做

var $ = document.querySelector.bind(document);

function showHide() {

  var login_panel = $("#login_panel");
  console.log(login_panel);
  var display = login_panel.style.display === "none" ? "block" : "none";
  login_panel.style.display = display;
  gapi.signin.go(login_panel); //Initialize the API after the element becomes visible.
}

检查这个jsfiddle 有一个工作示例。

Google 如果父元素被隐藏，登录按钮不会在 Firefox 中加载

Google sign-in button doesn't load in Firefox if parent element is hidden

html

javascript

firefox

google-openid