从同一个脚本提供不同的 HTML 页面？

Question

我正在尝试创建一个 GAS 项目，该项目通过根据用户点击的内容提供不同的 HTML 页面来更改其 UI。我无法弄清楚如何从脚本中提供不同的 HTML，替换当前的浏览器页面并保留状态。任何帮助表示赞赏。谢谢你。

Answer 1

我使用两个选项：

• 有一个包含按钮或文本区域的主页，其中 onchange 设置为回调服务器端并获取新页面数据的函数，然后将当前页面或页面的一部分替换为新页面。
• 在 URL 中传递参数并让服务器端 doGet() 解析参数并根据这些值分支以加载给定页面。

我有效地结合了这两种方法。基本上我有一个 div，其中包含我的“菜单”和一个 div，它是要替换的部分。我的菜单发生变化，然后数据被发送回服务器以获取动态正文。返回 HTML 然后我 replace using innerHTML.

在相同的代码中，我提供了pass menu values via the published URL 的功能。如果我这样选择，这允许我直接访问一些值，因为我有一个 Google 站点，我们将脚本嵌入到页面中，并且菜单选择可能特定于该页面。它允许我们使用 iFrame 来显示 Web 应用程序并直接进入相关界面。

Answer 2

使用google.script.run，您可以从 html 页面在服务器上运行任何脚本。通过communicating with the server，您可以访问PropertiesService，这使您能够在页面之间存储信息。我个人喜欢HTML Service createHtmlOutput(html)，因为我可以编辑 html 而无需编辑单独的页面。

我决定在这里回答你的问题，以便我可以使用代码部分。

问题：

我实际上希望避免操纵 HTML 并提供一个 存储在项目中的完全不同的 HTML 文件。我该怎么做 页面再次调用脚本并将其自身替换为新的 内容？

我们猜想完全替换页面并不是您真正想要的，因为用户将遭受页面刷新。但是你可以像这样创建 div：

<style>#R01{display:none;}</style>
<div class="replaceable" id="R01"></div>

如果您将所有可替换的内容都放在这样的 div 中，那么您可以通过如下调用从服务器请求内容：

google.script.run
    .withSuccessHandler(updateConversation)
    .withFailureHandler(showStatus)
    .getConversation();

并将新内容放入适当的 div 中，然后用另一对更改 css 并关闭旧内容并打开新内容。从而避免页面刷新。不要忘记先将旧数据保存到 PropertiesService 中。所以我不认为改变整个页面是要走的路，但我可能是错的。我认为只需更改一些内部内容就可以避免整个页面刷新的需要。如果您想更改图像，您可以使用CSS Sprites避免再次下载