javascript - 在 Apps Script Web App 中实现一个 slider 。 oninput 事件未触发

Question

我正在尝试实现一个 slider ，该 slider 将在用户移动 slider 时显示当前值。我最初有一个显示值的 onchange 事件，但只有在用户停止拖动 slider 时才发生。一旦我将其更改为 oninput，该值就永远不会改变。

我已经在 google apps 脚本之外实现了这段代码，并且它有效。有没有办法让它在谷歌应用程序脚本中工作？

这是 HTML 模板:

<div id="min" style="display:inline">0</div>
<input type="range" id="slider" oninput="updateSliderValue()">
<div id="max" style="display:inline">100</div>
<div id="sliderValue">Current Value: 0</div>

<script>
function updateSliderValue(){
  var sliderValue = document.getElementById("slider").value;
  document.getElementById("sliderValue").innerHTML = "Current Value: " +    sliderValue;
}
</script>

下面是简单的代码.gs:

function doGet() {
  return HtmlService.createTemplateFromFile('TestSliderTemplate').evaluate();
}

Answer 1

将您的 doGet() 函数更改为:

function doGet() {
  return HtmlService.createTemplateFromFile('TestSliderTemplate')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

您需要设置SandboxMode。

最近唯一可用的沙盒模式更改为 IFRAME。沙盒模式现在始终默认为 IFRAME。以前有各种沙箱模式，从 EMULATED 开始，然后是 NATIVE，现在是 IFRAME。过去你可以选择不同的模式，但现在你不能。但 IFRAME 模式的限制最少，因此要好得多。

Google Documentation - SandBox Mode

Working HTML App of slider:

文件:

Apps Script File