网站同时用Google One Tap与登录按钮，如何在登录页隐藏One Tap？

方法一：仅在非登录页面初始化Google One Tap #

这是最高效的方式，直接避免在登录页面加载One Tap的初始化逻辑，减少资源消耗。核心思路是通过判断当前页面的URL路径，只在非登录页面执行One Tap的初始化和弹窗触发代码。

// 替换为你的登录页面路径标识，比如'/login'、'/sign-in'等
const isLoginPage = window.location.pathname.includes('/login');

if (!isLoginPage) {
  // 初始化Google One Tap
  google.accounts.id.initialize({
    client_id: '你的客户端ID',
    callback: (response) => {
      // 处理登录回调逻辑
    }
  });
  // 触发One Tap弹窗
  google.accounts.id.prompt();
}

// 无论是否在登录页面，都可以初始化Signin with Google按钮（仅在登录页面渲染按钮即可）
google.accounts.id.renderButton(
  document.getElementById('g-signin-container'), // 仅登录页面存在此容器
  { theme: 'outline', size: 'large' }
);

方法二：在登录页面主动关闭One Tap #

如果One Tap的初始化逻辑是全局加载的（无法仅在非登录页面初始化），可以在登录页面加载后主动关闭弹窗并禁用自动提示。

// 登录页面专属JS代码
window.addEventListener('load', () => {
  // 关闭当前显示的One Tap弹窗
  google.accounts.id.cancel();
  // 禁用自动选择账号的提示
  google.accounts.id.disableAutoSelect();
});

注意事项 #

• 确保window.location.pathname的判断逻辑匹配你的实际登录页面路径，比如如果登录页面是/user/signin，就改成includes('/user/signin')。
• Signin with Google按钮的渲染容器仅在登录页面存在，这样即使全局初始化了渲染方法，也只会在登录页面显示按钮。

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