Google Apps 脚本切换 html 文件答案

【问题标题】：Google Apps Script switching html filesGoogle Apps 脚本切换 html 文件
【发布时间】：2016-12-15 04:09:56
【问题描述】：

我想知道是否可以使用 google 应用程序脚本来显示一个 html 文件的内容返回 HtmlService.createHtmlOutputFromFile('0'); ，在文件中有一个按钮，当按下按钮时，它将导致屏幕擦除当前信息并用第二个html文件替换自己返回 HtmlService.createHtmlOutputFromFile('1'); . *注意我不想链接到谷歌文档或其他网页。只是想知道您是否可以在同一脚本文档中的 html 文件之间切换。如果可能的话，我的理由是要有一个“菜单”页面来显示不同的主题，并将所有内容保存在一个文档中以更有条理。

【问题讨论】：

是的，这是可能的。 Apps 脚本有一个名为 HtmlService 的服务。您可以使用 HtmlService 创建侧边栏、对话框和 Web 应用程序。删除和替换 HTML 的能力主要是使用所谓的 DOM 的结果。如果您创建边栏、对话框或 Web 应用程序，它将是 JavaScript、DOM、CSS、Apps 脚本代码和 HTML 的组合。所有这些都是独立的东西，但 DOM 经常被混淆为 JavaScript，而 Apps Script 可能会与 JavaScript 混淆。 Apps Script 使用 JavaScript，但 Apps Script 服务是特定于 Google 产品的。
要完成你想要的，你可以使用 DOM 属性innerHTML。 Link to innerHTML information
抱歉，我不想简单地修改 html 页面中的 DOM。我想要做的是从一个初始 html 文件开始（返回 HtmlService.createHtmlOutputFromFile('0');）并使用文件中的一个按钮，让页面擦除初始模型并将其替换为另一个（返回 HtmlService.createHtmlOutputFromFile( '1');)。我知道并了解文档对象模型并使用 javascript 更改数据。除了简单地链接到一个完全不同的 GAS 网络应用程序之外，我还没有找到一种方法来用 GAS 替换初始“返回”值。
我猜你想要的是打一个google.script.run.myFunctionName() 调用，然后处理返回值？

标签： javascript html google-apps-script

【解决方案1】：

在一定程度上是可能的。我们将暗示有一个函数可以从 HTML 文件中获取信息，然后将其写入页面。如果您希望能够导航，那么您拥有的每个.html 文件必须在<script></script> 中具有以下功能

function changePage(page) {
    document.open();   //should work fine without this
    document.write(page);
    document.close();  //should work fine without this
}

此位将处理使用新内容更改整个页面的内容。现在我们需要以某种方式获取该内容。这将通过您的 Google 脚本中的 .gs 文件中的函数来完成，如下所示

function newPage(page) {
  return HtmlService.createHtmlOutputFromFile(page).getContent()
}

然后在您的页面内部，每当您想要更改为新页面时，您都需要一个按钮：

<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>

在这种情况下，newPage() 函数需要一个字符串来说明 html 的名称。所以按照逻辑我们会做

return HtmlService.createHtmlOutputFromFile('success').getContent()`

一旦我们按下那个按钮，一旦脚本完成并返回我们想要的 HTML 字符串，我们就可以使用它来设置当前页面的 HTML。

这是它如何工作的完整示例。您可以在Index.html 和success.html 之间导航

代码.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function newPage(page) {
  return HtmlService.createHtmlOutputFromFile(page).getContent()
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>

  <script>  
  function changePage(page) {
    document.open();
    document.write(page);
    document.close();
  }
  </script>

  <body>
  First Page
    <button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>
  </body>
</html>

success.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>  
  <script>  
  function changePage(page) {
    document.open();
    document.write(page);
    document.close();
  }
  </script>
  <body>
    It worked!
    <button onclick="google.script.run.withSuccessHandler(changePage).newPage('Index')">First Page</button>
  </body>
</html>

【讨论】：