如何从 squarespace 页面调用谷歌应用程序脚本？答案

【问题标题】：How to call google apps script from a squarespace page?如何从 squarespace 页面调用谷歌应用程序脚本？
【发布时间】：2016-08-31 10:16:08
【问题描述】：

我在我的 squarespace 网站上使用现成的代码。我找到了一种通过设置现成的谷歌应用程序脚本将文件上传到我的谷歌驱动器的方法。它适用于发布应用程序提供的网址。

但是，我通过代码注入在我的 squarespace 页面上实现了现成解决方案中的 html 代码，它显然不起作用。脚本代码中可能没有任何信息可以指向通过发布应用程序生成的特定 URL。

这是我在 squarespace 中用于注入的代码（我需要一些将我连接到谷歌应用脚本服务器端的代码）

 <div align="center">
  <table width="459" border="0">
    <tbody>
      <tr>
        <td width="462"><div align="center">
           <hr>
         </div>
          <form id="myForm" align="center">
            <input type="text" name="myName" placeholder="Your name..">
            <input type="file" name="myFile">
            <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
          </form>
          <div id="output"></div>
          <script>
     function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
          </script>
        <style>
 input { display:block; margin: 20px; }

           </style>
         <hr></td>
      </tr>
    </tbody>
  </table>
   <h3>&nbsp;</h3>
   <p>&nbsp;</p>
</div>

现在服务器端的代码如下所示：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function uploadFiles(form) {

  try {

    var dropbox = "RHT";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

请帮助这必须添加非常简单的代码才能使其工作。

非常感谢

【问题讨论】：

标签： file upload squarespace

【解决方案1】：

您现在可以通过将 Google 脚本的前几行更改为以下内容来做到这一点；

function doGet() {
   return HtmlService.createHtmlOutputFromFile('index.html').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

然后您可以将代码块添加到 Squarespace 和 iframe 中，或者我的代码块位于表单块的高级选项卡下的 POST-SUBMIT HTML 部分（用户先填写我的表单，然后能够用脚本上传他们的内容）我使用这个代码，但你可以调整宽度或诸如此类;

<iframe src="https://YourPublishedGoogleScriptURLhere"width="625"height="361"frameborder="0"></iframe>

【讨论】：

【解决方案2】：

我也有同样的问题。我认为问题在于 Google 阻止我们在其域之外的 iframe 等中使用该脚本。我目前的解决方案是

在 Squarespace 中创建表单
在“字段”中输入所需信息
在“高级”选项卡中，插入从http://www.squareguru.com/form-redirect 获得的代码，该代码将自动将用户重定向到您的 Google 脚本。代码如下所示；

<meta http-equiv="refresh" content="0; url=https://script.google.com/macros/s/etc"> <script> window.location.href = 'https://script.google.com/macros/s/etc'; window.location.assign('https://script.google.com/macros/s/etc'); </script>
在我的 Google 脚本“server.gs”页面中，我只是将行 return "File uploaded successfully " + file.getUrl(); 更改为 return "File uploaded successfully. Please click the back button in your browser to return to Site Name";

如果有人知道如何在完成后将 Google Apps 脚本重定向到另一个 URL，而不是显示“文件上传成功”，那么我可以让它重定向到我网站上的一个页面，该页面显示上传成功并继续查看我们的其他博客等。

我还在测试 jotform.com，它可以让您以他们的形式将文件上传到 Google 云端硬盘，但除非他们的免费套餐满足您的需求，否则他们会按月收费。然后他们会为您提供将表单插入 Squarespace 的代码。

希望这对您有所帮助。如果有人想在 Google Apps 脚本完成后重定向到另一个 URL，请告诉我。

编辑：我想您还需要这个<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>，它位于 Advanced > Code Injection > Header 中，以允许脚本运行。

【讨论】：