如何使用独立的 Google Apps 脚本导航 html 页面？答案

【问题标题】：How to navigate html pages with standalone Google Apps Script?如何使用独立的 Google Apps 脚本导航 html 页面？
【发布时间】：2023-03-09 06:15:01
【问题描述】：

我正在使用 HTMLService 创建一个独立的谷歌应用脚本网络应用。我希望能够编写代码来点击应用程序 HTML 页面上的链接并转到链接中的页面。很像一个普通的网页，除了作为一个谷歌网络应用程序。正常的“点击我”不起作用。

这是我正在做的事情：

Code.gs
/*
 * Main function, sets up webapp ui.
 */ 
function doGet() {
    return HtmlService.createHtmlOutputFromFile('Index')
   .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

 function navigateTo(url) {
   return HtmlService.createHtmlOutputFromFile(url)
  .setSandboxMode(HtmlSerivce.SandboxMode.IFRAME);
}


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function handleNavigation() {
      //Logger.log("Hello from handleNavigation, within Index.html");
      google.script.run.navigateTo('EditUsers')
      document.getElementById("test").innerHTML = "Success!";
    }
  </script>
  </head>
  <body>
    <h1>Home</h1>
    This is the beginning of the Project Status Web App<br/>
    <a href="EditUsers.html">Edit Users</a><br/><button            onclick="handleNavigation()">Button Time!</button>
    <a id="test" href="EditProjects.html">Edit Projects</a><br/>
    <a href="ViewProjectStatuses.html">View Project Statuses</a><br/>
  </body>
</html>

【问题讨论】：

navigateTo(url) 函数中不需要.setSandboxMode(HtmlSerivce.SandboxMode.IFRAME)。我会将navigateTo() 的名称更改为通用名称，例如getNewHTML()

标签： google-apps-script

【解决方案1】：

设置页面导航系统包含多个部分。如果“页面”中的 HTML 已经存在，那么您可能希望也可能不希望从服务器获取所有新内容并再次注入内容。如果有内容发生变化，您可能希望从服务器检索内容，并注入新内容。如果页面中的内容不需要更新，并且内容已经存在，那么您需要做的就是显示页面，并隐藏上一个页面。您可能希望页面导航代码检查所有这些情况，并采取相应措施。

您可以在用户每次导航到新页面时从服务器获取相同的内容，在这种情况下，代码会简单得多。因此，不必每次都检查现有内容。

如果您要显示的“页面”中没有内容，则需要withSuccessHandler() 才能从服务器接收新的 HTML。

现在你有：

google.script.run.navigateTo('EditUsers')

你需要：

google.script.run
  .withSuccessHandler(injectNewHtml)
  .navigateTo('EditUsers');

function injectNewHtml() {
  //Code here to inject HTML into the new page

  //Code to show page being navigated to

  //Code to hide all other pages

};

如果您想检查现有内容，可以使用以下内容：

var numberOfChildNodes = document
              .getElementById(elementOfPage).childNodes.length;

if (numberOfChildNodes === 0) {
  google.script.run
    .withSuccessHandler(injectNewHtml)
    .navigateTo('EditUsers');
};

【讨论】：