如何使用链接重新加载Google Apps脚本网络应用? [英] How to reload a Google Apps Script web app with a link?
本文介绍了如何使用链接重新加载Google Apps脚本网络应用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
前段时间，我将一些行组合在一起以生成随机颜色，所有这些行均在#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>
¶¶¶¶¶REWRITE¶¶¶¶¶
在库珀的帮助下，做了一些小的更改，现在它可以使用类似于链接的内容(几乎在末尾添加了 <div class="another" onClick="myFunction();">color</div> ):
Code.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>
解决方案
尝试以下操作: 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 ;
}
Some time ago I put together some lines to generate random colors, all of them under #777777.
→ https://script.google.com/macros/s/AKfycbyXRyJzSUo5wJxhuHliGpL-GPuhKPvZ3mBKtSDZKd4qyxbvIsk/exec
This is the code:
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>
Please tell me how and where to add a link (or button) to run the code again and generate a new random color.
I've tried the following with no success:
<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>
¶¶¶¶¶ REWRITE ¶¶¶¶¶
After Cooper's help some little changes were made and now it works with something that looks like a link (<div class="another" onClick="myFunction();">color</div> added almost at the end):
Code.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>
解决方案
Try this: 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 ;
}
这篇关于如何使用链接重新加载Google Apps脚本网络应用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
