如何使用链接重新加载 Google Apps Script Web 应用程序？答案

【问题标题】：How to reload a Google Apps Script web app with a link?如何使用链接重新加载 Google Apps Script Web 应用程序？
【发布时间】：2019-12-25 04:52:52
【问题描述】：

前段时间我整理了几行生成随机颜色，都在#777777下。

→https://script.google.com/macros/s/AKfycbyXRyJzSUo5wJxhuHliGpL-GPuhKPvZ3mBKtSDZKd4qyxbvIsk/exec

这是代码：

Code.js

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

Index.html

<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:CourierNew;
text-align:center;
}
</style>
</head>
<body onload="myFunction()">
<div id="color"></div>
<script>
function myFunction() {
var min = 0;
var max = 77;
var number1 = Math.round(Math.random() * (max - min) + min); var number1 = number1.toString().replace('.0','');
var number2 = Math.round(Math.random() * (max - min) + min); var number2 = number2.toString().replace('.0','');
var number3 = Math.round(Math.random() * (max - min) + min); var number3 = number3.toString().replace('.0','');
if(number1.length==1){var number1 = 0+number1.toString();}
if(number2.length==1){var number2 = 0+number2.toString();}
if(number3.length==1){var number3 = 0+number3.toString();}
var number = number1+number2+number3;
var lines = "<div style='color:#"+number+"'><br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·";
document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+lines+"</div>";
}
</script>
</body>
</html>

请告诉我如何以及在何处添加链接（或按钮）以再次运行代码并生成新的随机颜色。

我尝试了以下方法但没有成功：

<a href="javascript:window.location.href=window.location.href">another color...</a>
<a href="javascript:location.reload();">another color...</a>
<a href="javascript:window.location.reload(true)">another color...</a>
<a href=".">another color...</a>
<a href="">another color...</a>
<a href="https://script.google.com/macros/s/AKfycbyXRyJzSUo5wJxhuHliGpL-GPuhKPvZ3mBKtSDZKd4qyxbvIsk/exec">another color...</a>
<a href="#" onclick="window.location.reload(true);">another color...</a>
<a href="" onclick="window.location.reload(true);">another color...</a>
<a href="javascript:window.location.href=window.location.href">another color...</a>
<a href="javascript:">another color...</a>
<a href="?">another color...</a>
<a href="javascript:history.go(0)">another color...</a>
<a href="!#" onClick="window.location.reload(true);">another color...</a>
<a href="javascript:history.back()">another color...</a>

更新

在 Cooper 的帮助下进行了一些小改动，现在它可以使用看起来像链接的东西（<div class="another" onClick="myFunction();">color</div> 几乎在最后添加）：

代码.gs

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

Index.html

<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:CourierNew;
text-align:center;
}
.another{
  cursor:pointer;
  text-decoration:underline;
  }
</style>
</head>
<body onload="myFunction()">
<div id="color"></div>
<script>
function myFunction() {
  var min = 0;
  var max = 77;
  var number1 = Math.round(Math.random() * (max - min) + min); var number1 = number1.toString().replace('.0','');
  var number2 = Math.round(Math.random() * (max - min) + min); var number2 = number2.toString().replace('.0','');
  var number3 = Math.round(Math.random() * (max - min) + min); var number3 = number3.toString().replace('.0','');
  if(number1.length==1){var number1 = 0+number1.toString();}
  if(number2.length==1){var number2 = 0+number2.toString();}
  if(number3.length==1){var number3 = 0+number3.toString();}
  var number = number1+number2+number3;
  var lines = "<div style='color:#"+number+"'><br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·";
  document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+'<div class="another" onClick="myFunction();">color</div>'+lines+"</div>";
}
</script>
</body>

【问题讨论】：

这来自您原始代码中的这一行：document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+'<div class="another" onClick="myFunction();">color</div>'+lines+"</div>"; } 我只是不理会您的代码，实际上甚至没有测试它，因为我一直在做这种事情。

标签： google-apps-script

【解决方案1】：

试试这个： html:

<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:CourierNew;
text-align:center;
}
</style>
</head>
<body onload="myFunction()">
<input type="button" value="Run MyFunction Again" onClick="myFunction();" />
<input type="button" value="Reload Page" onClick="reloadPage();" />
<div id="color"></div>
<script>
function myFunction() {
  var min = 0;
  var max = 77;
  var number1 = Math.round(Math.random() * (max - min) + min); var number1 = number1.toString().replace('.0','');
  var number2 = Math.round(Math.random() * (max - min) + min); var number2 = number2.toString().replace('.0','');
  var number3 = Math.round(Math.random() * (max - min) + min); var number3 = number3.toString().replace('.0','');
  if(number1.length==1){var number1 = 0+number1.toString();}
  if(number2.length==1){var number2 = 0+number2.toString();}
  if(number3.length==1){var number3 = 0+number3.toString();}
  var number = number1+number2+number3;
  var lines = "<div style='color:#"+number+"'><br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·";
  document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+lines+"</div>";
}
function reloadPage(){
  google.script.run
  .withSuccessHandler(function(url){window.open(url,"_top");})
  .getScriptURL();
}
</script>
</body>
</html>

gs:

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

function getScriptURL() {
  var url = ScriptApp.getService().getUrl();
  return url ;
}

【讨论】：

感谢库珀。有用。我会等待 link 解决方案。
下方按钮附有链接解决方案。