简体   繁体   English

Google Apps 脚本切换 html 文件

[英]Google Apps Script switching html files

I'm wondering if it is possible with google apps script to display the contents of one html file return HtmlService.createHtmlOutputFromFile('0');我想知道谷歌应用程序脚本是否可以显示一个 html 文件的内容 return HtmlService.createHtmlOutputFromFile('0'); , within the file have a button, and when the button is pressed it will cause the screen to erase the current information and replace itself with a second html file return HtmlService.createHtmlOutputFromFile('1'); ,在文件中有一个按钮,当按下按钮时,它将导致屏幕擦除当前信息并用第二个 html 文件替换自身 return HtmlService.createHtmlOutputFromFile('1'); . . *note I am NOT wanting to link to a google document nor another webpage. *注意我不想链接到谷歌文档或其他网页。 Simply wanting to know if you can switch between html files within the same script document.只是想知道您是否可以在同一脚本文档中的 html 文件之间切换。 If it is possible, my reasoning is to have a "menu" page that will display different topics and keep everthing in one document to be more organized.如果可能的话,我的理由是要有一个“菜单”页面来显示不同的主题,并将所有内容保存在一个文档中以更有条理。

It's possible to an extent. 在某种程度上是可能的。 We will imply have a function to grab the information from an HTML file and then write it on the page. 我们将暗示有一个功能,可以从HTML文件中获取信息,然后将其写在页面上。 If you want to be able to navigate, then each .html file you have must have the following function in the <script></script> 如果您希望能够导航,则每个拥有的.html文件必须在<script></script>具有以下功能

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

this bit will handle changing the content of the entire page with new content. 该位将处理使用新内容更改整个页面的内容。 Now we need to get that content somehow. 现在,我们需要以某种方式获取该内容。 This will be done with a function inside of a .gs file in your Google Script that looks like this 这将通过Google脚本中.gs文件内部的函数来完成,如下所示

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

Then inside of your page, whenever you want to change to a new one you need to have let's say a button: 然后在页面内部,每当要更改为新页面时,都需要一个按钮:

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

In this case the newPage() function expects a string that will say what is the name of the html. 在这种情况下, newPage()函数需要一个字符串,该字符串将说明html的名称是什么。 So following the logic we will do 因此,遵循逻辑,我们将做

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

once we press that button and once that script finishes and returns the string of an HTML we want, we then use that to set the HTML of the current page. 一旦我们按下该按钮,并且该脚本完成并返回了我们想要的HTML字符串,我们就可以使用它来设置当前页面的HTML。

Here is the full example of how it would work. 这是如何工作的完整示例。 You can navigate between Index.html and success.html 您可以在Index.htmlsuccess.html之间导航

Code.gs 代码

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

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

Index.html 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 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>

Could this work if I use HtmlService.createTemplateFromFile('Index').evaluate();如果我使用 HtmlService.createTemplateFromFile('Index').evaluate(); 这可以工作吗? instead return HtmlService.createHtmlOutputFromFile('Index')?而是返回 HtmlService.createHtmlOutputFromFile('Index')?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM