Question

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

Answer 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

之间导航

<强> Code.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>

Google Apps脚本切换html文件

1 个答案: