Apps Script侧边栏集成Firebase Auth后认证跳转空白页问题咨询

嘿，我来帮你搞定这个跳转空白页的问题！你遇到的情况其实是表单默认提交行为在搞鬼，咱们一步步拆解：

首先看你代码里的核心问题：你用了<form action="">标签，浏览器对于表单内的按钮，默认会触发表单提交动作——哪怕你给按钮绑定了自定义的login()函数，浏览器还是会优先执行这个默认行为。因为你的action属性是空的，所以就会跳转到当前页面的空白版本，也就是你看到的现象。

两种快速修复方案 #

方案一：阻止按钮的默认提交行为

你可以直接修改按钮的点击事件，明确告诉浏览器不要执行默认的表单提交：

<button onclick="login(); return false;">Login</button>

或者更规范一点，在login函数里通过事件对象阻止默认行为：

function login(e) {
  e.preventDefault(); // 关键：阻止表单默认提交逻辑
  var email = document.getElementById("email").value;
  var password = document.getElementById("psw").value;
  if (email.length < 3 || password.length < 8) {
    return;
  }
  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    // 这里可以加个用户提示，比如alert(errorMessage)让用户知道错误原因
  });
}

对应的按钮要改成：

<button onclick="login(event)">Login</button>

方案二：移除不必要的form标签

其实你的场景里根本不需要用form标签，因为你是通过自定义JS函数处理认证，不是要提交表单到某个后端接口。直接把<form action="">和对应的</form>删掉，用普通的<div>来包裹输入框和按钮就行，这样就不会触发任何默认提交行为了。

额外小建议 #

你用的Firebase JS SDK版本是5.9.2，这个版本已经比较老旧了，建议换成最新的稳定版（如果想保持类似写法可以用兼容模式），这样能避免一些旧版本的潜在bug。

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