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

时间:2016-04-07 18:54:59

标签: google-apps-script

我正在使用HTMLService创建一个独立的Google Apps脚本网络应用。我希望能够编写代码来点击应用程序HTML页面上的链接,然后转到链接中的页面。与常规网页非常相似,除了作为Google Web App。正常">点击我不起作用。

这是我正在做的事情:

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>

1 个答案:

答案 0 :(得分: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');
};