Google Sites实现下拉选择联动显示对应Google表单技术求助

为什么直接加HTML脚本无效 #

Google Sites（新版）的嵌入环境对自定义JavaScript有严格限制，直接在嵌入的HTML中添加<script>标签不会执行，这就是你测试alert也没效果的核心原因。

可行解决方案 #

方案一：Google Apps Script Web应用嵌入（推荐） #

通过Google Apps Script构建带交互的独立组件，再嵌入到Google Sites中，避开站点的JS限制：

1. 创建Apps Script项目
   打开Google Apps Script，新建项目，删除默认代码，添加以下内容：

   function doGet() {
     return HtmlService.createHtmlOutputFromFile('Index')
       .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // 允许嵌入到其他站点
   }
   

   然后新建HTML文件（点击左侧“+”→HTML），命名为Index，粘贴以下代码（替换其中的表单URL）：

   <!DOCTYPE html>
   <html>
     <style>
       #formSelector { padding: 8px; margin-bottom: 16px; }
       #formContainer iframe { width: 100%; min-height: 800px; border: none; }
     </style>
     <body>
       <select id="formSelector">
         <option value="">请选择需要填写的表单</option>
         <option value="https://docs.google.com/forms/d/e/XXXXXXX/viewform">客户反馈表单</option>
         <option value="https://docs.google.com/forms/d/e/YYYYYYY/viewform">员工入职表单</option>
       </select>
       <div id="formContainer"></div>
   
       <script>
         const selector = document.getElementById('formSelector');
         const container = document.getElementById('formContainer');
   
         selector.addEventListener('change', () => {
           const formUrl = selector.value;
           if (formUrl) {
             // 嵌入表单（添加?embedded=true确保适配嵌入模式）
             container.innerHTML = `<iframe src="${formUrl}?embedded=true" loading="lazy"></iframe>`;
           } else {
             container.innerHTML = '';
           }
         });
       </script>
     </body>
   </html>
   

2. 部署为Web应用
   点击顶部“部署”→“新建部署”，设置：

   • 类型：Web应用
   • 执行：以我自己的身份运行
   • 谁可以访问：根据需求选择（比如“任何人，甚至匿名”）
     点击部署，复制生成的Web应用URL。

3. 嵌入到Google Sites
   在Google Sites编辑页面，添加“嵌入”组件，选择“通过URL嵌入”，粘贴刚才的Web应用URL，保存即可。

方案二：页面内锚点切换（无需额外部署） #

如果不想用Apps Script，可以把所有表单预先嵌入到页面，通过锚点和CSS/JS切换显示：

添加“嵌入”组件，选择“嵌入代码”，粘贴以下HTML（替换ID、表单URL和名称）：

<style>
  .form-section { display: none; }
  .form-section:target { display: block; }
  #formSelector { padding: 8px; }
</style>

<select id="formSelector">
  <option value="">请选择表单</option>
  <option value="#form1">客户反馈表单</option>
  <option value="#form2">员工入职表单</option>
</select>

<div id="form1" class="form-section">
  <iframe src="https://docs.google.com/forms/d/e/XXXXXXX/viewform?embedded=true" width="100%" height="800" frameborder="0"></iframe>
</div>
<div id="form2" class="form-section">
  <iframe src="https://docs.google.com/forms/d/e/YYYYYYY/viewform?embedded=true" width="100%" height="800" frameborder="0"></iframe>
</div>

<script>
  document.getElementById('formSelector').addEventListener('change', function() {
    if (this.value) {
      window.location.hash = this.value;
    } else {
      window.location.hash = '';
    }
  });
</script>

这种方式的缺点是页面加载时会加载所有表单，可能影响加载速度，但不需要额外部署服务。

注意事项 #

• Google表单的嵌入URL必须添加?embedded=true参数，否则会跳转到表单的独立页面。
• 部署Web应用时，若修改了代码，需要重新部署新版本才能生效。
• 权限设置要匹配你的使用场景，内部使用可选择“组织内任何人”，公开使用选“任何人”。

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