Google Login iframe在相似页面渲染不一致问题求助

问题场景 #

两个相同页面的不同部署环境，调用google.accounts.id.renderButton生成用于关联站点账号的Google按钮，后端运行正常，但其中一个环境出现异常：

• 环境1：按钮内部iframe的div为空（符合预期）
• 环境2：iframe内div包含多余内容，直接导致Google按钮覆盖其他按钮，且标签重复出现
• 页面加载时Chrome控制台抛出两个错误，但同一函数渲染的另一个按钮却能正常加载

相关代码 #

var elementLink = document.getElementById('googleLinkBtn');
google.accounts.id.renderButton(
    elementLink,
    { theme: "outfilled", size: "large", shape: "square", width: "300",  click_listener: attachLinkButton }
);

排查与解决思路 #

• 优先查看控制台错误详情：控制台的错误是关键线索，哪怕另一个按钮正常，错误可能指向环境差异——比如环境2的域名未添加到Google开发者平台的OAuth授权域名列表、脚本资源加载失败、CORS配置问题，这些都可能导致iframe渲染异常。
• 检查脚本加载是否重复/时机错误：确认环境2是否重复引入了Google身份验证脚本，或者是否在DOM未完全就绪时就调用了renderButton，这会引发重复渲染或DOM结构混乱。
• 验证容器元素的唯一性：检查环境2中googleLinkBtn元素是否存在重复id，或者是否有其他脚本修改了该元素的DOM结构，导致渲染时出现异常嵌套。
• 临时更换主题测试：outfilled主题可能存在特定环境下的渲染bug，可临时替换为outline或filled主题，看是否还会出现iframe多余内容的问题。
• 强制清理浏览器缓存：环境2可能缓存了旧的脚本或页面资源，按Ctrl+Shift+R强制刷新后再测试，排除缓存导致的异常。

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