如何在提交Google表单时关闭HtmlService弹窗？

这个问题挺常见的——因为嵌入的Google表单和你的HtmlService弹窗属于跨域上下文，直接从表单内部触发关闭弹窗的操作会被浏览器的跨域安全策略阻止。不过我们可以通过监听iframe的URL变化来实现这个需求，具体解决方案如下：

核心思路 #

Google表单在提交完成后，会自动跳转到一个包含formResponse的成功页面。我们可以在HtmlService的页面中添加JavaScript代码，监听iframe的加载事件，当检测到iframe的URL包含这个标识时，调用Google Apps Script的内置方法关闭弹窗。

修改后的完整代码 #

function launchForm() { 
  var form = FormApp.openById('15Qw9jmolybvMbx2d3UhddEWHrKe0zBiV5_asKXolsM0'); 
  var formUrl = form.getPublishedUrl() + '?embedded=true';

  // 构建包含监听逻辑的HTML内容
  var htmlContent = `
    <h1>Your Organization</h1>
    <iframe id="formIframe" src="${formUrl}" width="1000" height="900" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
    <script>
      const iframe = document.getElementById('formIframe');
      iframe.addEventListener('load', function() {
        // 检测是否跳转到了提交成功页面
        if (iframe.src.includes('formResponse')) {
          // 调用Google Apps Script的关闭方法
          google.script.host.close();
        }
      });
    </script>
  `;

  var htmlApp = HtmlService 
    .createHtmlOutput(htmlContent)
    .setTitle('Form') 
    .setWidth(1000) 
    .setHeight(1000); 
  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp); 
}

代码说明 #

• 我们改用模板字符串构建HTML内容，让代码结构更清晰，同时嵌入了监听逻辑。
• 通过addEventListener监听iframe的load事件，每次iframe加载新页面时都会触发这个事件。
• 当检测到iframe的URL包含formResponse（Google表单提交成功页面的特征标识）时，调用google.script.host.close()方法——这是Google Apps Script专门提供的用于关闭HtmlService弹窗的内置方法。

注意事项 #

• 确保你的Google表单没有设置自定义提交后跳转页面，如果设置了自定义跳转，需要调整检测的URL标识，匹配你自定义页面的特征。
• 这个方法依赖于Google表单提交后的默认跳转行为，如果Google后续修改了成功页面的URL结构，可能需要调整检测逻辑。

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