用户切换locale时重新加载Sign In With Google按钮的更优实现方案问询

你现在用的移除script标签+容器再重新添加的方案属于可用但性能冗余的实现，存在重复拉取脚本资源、偶发全局上下文冲突、回调重复绑定的隐患，可参考以下更优的实现方式：

方案1：配置无变更时局部重渲染 #

如果仅需要重新渲染相同配置的按钮（比如原容器被删除、页面局部刷新后需要重新展示按钮），不需要修改已加载的脚本，直接调用官方暴露的全局渲染方法即可：

// 准备按钮容器，不存在则先创建
const signInContainer = document.querySelector('#g_id_signin') || document.createElement('div');
signInContainer.id = 'g_id_signin';
// 挂载到你需要展示的位置
document.querySelector('.login-area').appendChild(signInContainer);

// 直接调用官方渲染方法，配置和初次初始化保持一致即可
google.accounts.id.renderButton(
  signInContainer,
  {
    theme: "filled_blue",
    size: "large",
    text: "signin_with",
    // 其他你需要的按钮样式配置
  }
);

方案2：配置变更时更新全局配置后重渲染 #

如果需要修改客户端ID、登录回调、授权范围等全局配置，先更新全局初始化参数再重渲染按钮即可，不需要重载脚本：

// 先更新全局配置
google.accounts.id.initialize({
  client_id: "YOUR_NEW_GOOGLE_CLIENT_ID",
  callback: yourNewLoginCallback,
  auto_select: false,
  // 其他全局配置项
});

// 再重新渲染按钮
const newContainer = document.querySelector('#new_g_signin');
google.accounts.id.renderButton(newContainer, {
  // 按钮样式配置
});

额外注意事项 #

• 如果调用时出现google.accounts.id未定义的报错，仅需要判断脚本加载状态即可，不需要删除原有script重新添加，可以通过轮询检测全局对象或者在script的onload回调中执行相关逻辑
• 如果需要完全卸载当前登录实例，调用google.accounts.id.cancel()即可清除所有绑定的事件、回调和临时状态，配合移除容器即可实现完全重置，下次使用直接重新调用initialize方法即可

内容的提问来源于stack exchange，提问作者alexs