问题描述
我已经多次尝试将调整为 Google Apps 脚本，但都没有成功。 此代码不适用于 Google Apps 脚本。 提前致谢...
代码.gs
function doGet() {
return HtmlService.createTemplateFromFile('Main')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function onLogin(form) {
if (form.username == "xxx") {
var template = HtmlService.createTemplateFromFile('Response');
//Setup any variables that should be used in the page
template.firstName = "Your name is here";
template.username = form.username;
return template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
} else {
throw "You could not be found in the database please try again.";
}
}
function include(filename) {
return HtmlService.createTemplateFromFile(filename)
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
主文件
<?!= include('CSS'); ?>
<script>
function loadPage(htmlOut) {
var div = document.getElementById('content');
div.innerHTML = htmlOut;
document.getElementById('errors').innerHTML = "";
}
function onFailure(error) {
var errors = document.getElementById('errors');
errors.innerHTML = error.message;
}
</script>
<div id="errors"></div>
<div id="content">
<?!= include('Login'); ?>
</div>
CSS.html
<style>
p b {
width: 100px;
display: inline-block;
}
</style>
登录.html
<script>
function onLoginFailure(error) {
var loginBtn = document.getElementById('loginBtn');
loginBtn.disabled = false;
loginBtn.value = 'Login';
onFailure(error);
}
</script>
<div class="loginPanel">
<form>
<p>
<b>Username: </b>
<input type="text" name="username"/>
</p>
<input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
.withSuccessHandler(loadPage)
.withFailureHandler(onLoginFailure)
.onLogin(this.parentNode)"/>
</form>
</div>
响应.html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { subtitle: 'popularity by percentage' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
这是已。 输入用户名：xxx。
1楼
Alan Wells
1
已采纳
2015-07-27 00:39:34
有关代码的工作示例，请单击以下链接：
包含代码的 Apps 脚本文件：
我看到您希望在登录后显示图表。图表的 HTML 文件有一个<script>标记，其中包含：
google.load("visualization", "1.1", {packages:["bar"]});
我认为评估方法不会在将图表发送回浏览器之前在服务器中创建图表。
此外，还有这一行：
google.setOnLoadCallback(drawStuff);
因为google.load()函数没有运行，所以没有回调。
因此，在注入 HTML 时永远不会调用drawStuff()函数。
您不能将<script>标签动态添加到 HTML 并让它运行。
当应用程序首次运行时，您需要将所有<script>标记添加到 Main.html 页面。
它可以创建一个新的功能，然后在任何时候运行该功能在页面第一次加载后。
你需要使用
var myFunc = new Function('a', 'b', 'return a + b');
myFunc(a,b);
还有另一个问题。 您需要删除：
this.disabled = true;
来自 onclick 属性。
因此，我会将可视化内容的<script>标记放入 Main.html 文件中。