在线测验场景下超时自动提交Google Form的JS实现方案咨询

核心限制说明 #

• 由于浏览器同源策略限制，你无法直接通过JavaScript操作跨域iframe（Google表单域名和你的站点域名不一致）内部的提交按钮，因此不能通过模拟点击iframe内按钮的方式实现提交。
• 可行方案是直接向Google表单的官方提交接口发送POST请求，无需操作iframe内容，即使表单全空白也能成功提交记录。

可直接替换使用的完整代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body> 
  <div id="timer" align="center"><a class="fa fa-book"></a> Psikotest Online <a class="fa fa-clock-o"></a> <span id="time"></span></div>
  <span id="form">
    <iframe id="googleForm" src="https://docs.google.com/forms/d/e/1FAIpQLSevaFFDGTTEvCV8O04zAB8G4IK-MZIMSWoUzgnWkBFiR_5y_Q/viewform?usp=sf_link">LOADING</iframe><br />
  </span>
</body>

<script>
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var batas = timer + 60*1 ;
    // 防重复提交标记
    var hasSubmitted = false;
    // Google表单提交地址：把原链接末尾的viewform替换为formResponse即可
    var formSubmitUrl = "https://docs.google.com/forms/d/e/1FAIpQLSevaFFDGTTEvCV8O04zAB8G4IK-MZIMSWoUzgnWkBFiR_5y_Q/formResponse";
    
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds + " Menit !";

        if (--timer < 0) {
            // 倒计时归零时先触发自动提交，仅执行一次
            if (!hasSubmitted) {
                hasSubmitted = true;
                // 跨域提交空表单，no-cors模式规避跨域报错
                fetch(formSubmitUrl, {
                    method: "POST",
                    mode: "no-cors",
                    // 如需提交固定默认值，可在下方FormData中追加对应字段，空表单提交保留空对象即可
                    body: new FormData()
                }).finally(() => {
                    // 提交完成后显示原有超时提示
                    document.getElementById("timer").innerHTML = "Waktu Anda Telah Habis, Jika tidak segera submit test secara otomatis pengerjaan anda tidak terekam keseluruhan";
                });
            }
        }
        if (--batas < 0) {
           document.getElementById("form").style.visibility = "hidden";
           document.getElementById("timer").style.visibility = "hidden";
        }

    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 1,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
</script>

<style type="text/css">
body {
    overflow: hidden;
}
iframe {
    height: 100%;
    width: 100%;
    border: 0px;
    padding-top: 8px;
    margin: 0px
}
#timer {
    background-color: #F0EBE3;
    color: #2C3639;
    font-family: arial;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 25px;
}
</style>

关键改动说明 #

• 原有布局、样式、倒计时逻辑完全保留，之前实现的倒计时展示、超时提示、超时1分钟后隐藏内容的效果全部正常生效，仅给iframe补充了id方便后续扩展。
• 新增防重复提交标记，避免定时器每秒触发时重复发送提交请求。
• 自动提交逻辑在倒计时归零时第一时间触发，使用no-cors模式发请求，不会触发浏览器跨域拦截，哪怕表单所有题目都是空白状态，也能在Google表单后台生成一条提交记录。
• 后续如果需要给表单提交固定默认值（比如用户ID、测试场次标记），只需要在FormData实例里append对应字段的键值对即可，不需要修改其他逻辑。
• 修复了原有样式中颜色值缺少#的兼容性问题，避免样式在部分浏览器下不生效。

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