返回
如何在 Google Apps Script 中动态更新模态框的信息？
javascript
2024-03-06 07:23:37
如何动态更新 Google Apps Script 中模态框中的信息
简介
Google Apps Script 模态框通常用于向用户提供信息或收集输入。但是，有时我们需要在脚本运行过程中动态更新模态框的内容。这篇文章将探讨如何实现这一目标。
问题陈述
想象一种场景，我们需要在 Google 表格中创建一个模态框模板，以显示有关后台运行脚本的信息。当脚本运行时，我们希望它能更新模态框，类似于控制台窗口。
初始设置
模态框的 HTML 代码非常简单，它包含一个用于显示信息的 div。我们使用一个在主脚本执行期间调用的函数创建此模态框。
挑战
我们可以在 HTML 中使用 google.script.run 从脚本标签向脚本传递数据。但是，我们希望动态地执行此操作，而不是通过传递变量或使用 google.script.run 每隔一段时间检查隐藏工作表。
解决方案
遗憾的是，目前没有直接的方法可以从应用脚本动态更新模态框的内容。但是，我们可以使用以下变通方法：
- 打开一个与模态框通信的即时执行函数。
- 在 HTML 中使用 Fetch API 发送更新。
- 创建名为 update_modal 的即时执行函数来处理请求。
优点
- 允许动态更新模态框的内容。
- 无需依赖变量或定期检查隐藏工作表。
- 跨平台兼容，可以在任何允许即时执行函数的 Google 应用程序中使用。
注意事项
- 即时执行函数需要在脚本中明确开启。
- Fetch API 仅适用于支持它的浏览器。
- 请确保使用安全的传输协议（例如 HTTPS）来发送请求。
示例
以下示例演示了如何使用此方法动态更新模态框：
main.js：
function main() {
show_popup();
start_listener();
}
test.html：
// ...
<script>
setInterval(() => {
fetch('/update_modal', {
method: 'POST',
body: JSON.stringify({info: new Date().toLocaleTimeString()})
});
}, 1000);
</script>
// ...
即时执行函数：
function update_modal(e) {
const info = e.parameter.info;
document.getElementById("information").innerText = info;
}
结论
虽然应用脚本中没有直接的方法可以动态更新模态框，但我们可以使用即时执行函数和 Fetch API 来实现这一目标。这提供了跨平台兼容性和无需定期检查的动态更新能力。
常见问题解答
1. 如何确保即时执行函数始终处于开启状态？
- 可以通过在脚本中添加以下行来确保即时执行函数始终处于开启状态：
ScriptApp.getService().setFunctionEnabled('update_modal', true);
2. 如何在不同的应用程序中使用此方法？
- 此方法可以在任何允许即时执行函数的 Google 应用程序中使用。您需要确保应用程序具有相同的脚本 ID 并引用相同的即时执行函数名称。
3. 为什么 Fetch API 不适用于我的浏览器？
- Fetch API 仅适用于支持它的浏览器。请检查您浏览器的文档以获取详细信息。
4. 如何使用安全的传输协议来发送请求？
- 可以在 Fetch API 中使用 协议来确保安全连接。
5. 如何在主脚本中处理错误？
- 可以使用 try-catch 块来在主脚本中处理错误。
