在这个阶段,我主要用于后端Javascript和服务器端Java,所以我的HTML并不像它需要的那样精明。
我已经构建了几个需要用户输入Apps脚本的应用程序,但我使用的是现已弃用的UI service,因为我不是设计师,这提供了一种简单的方法来设计简单的页面来传递数据来来回回。由于UI服务已被弃用了一段时间,我要求将这些服务迁移到HTML服务这一艰巨的任务,我注意到行为方面存在一些差异。
例如,在提交表单时,整个页面会刷新为空白页面,而我似乎无法阻止这一点。 UI服务将保持静态以便重新输入信息,并且我找不到使HTML服务停止刷新或重新加载表单的工作方法。
重现我的问题的简单代码:
function doGet() {
return HtmlService.createHtmlOutputFromFile('test')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function logValues(value){
Logger.log('Something worked....');
}
索引文件为:
<form>
<input type="submit" value="Book Meeting" onclick="google.script.run
.logValues()">
</form>
我尝试过的一些事情:
1)向'doGet'函数添加回调,尝试再次加载页面。 2)添加一个全新的功能,尝试调用一个新的HTML页面。
这里的问题是我对HTML服务的理解不足,但是我有一个简单的方法可以清除重新提交的表单,或者只是重新加载页面?我在SO上发现的其他问题都没有以我能理解的方式充分回答这个问题。
答案 0 :(得分:3)
由于您在技术上通过单击“提交”按钮提交表单,因此会创建页面刷新。您需要使用preventDefault函数取消提交事件,其中&#34;取消事件(如果可取消),而不会停止事件的进一步传播。&#34;
请参阅此处的文档:https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
所以也许你可以尝试这些方面的东西(直接来自文档):
function stopDefAction(evt) {
evt.preventDefault();
}
document.getElementById('my-checkbox').addEventListener('click', stopDefAction, false);
另一种选择是删除表单/输入元素,只需使用按钮元素,而不会在点击时触发页面刷新。
答案 1 :(得分:0)
这是一个有趣的转换旧UI服务的过程,我只是使用我的一个应用程序,它确实提高了代码的可读性。我发布了一份基本版本的副本in another question
一旦你了解它,它就会变得更加简单。这是在提交表单时使用类似于您的示例使用HTMLService的多个HTML文件的一个非常基本的示例(您可以传入参数)
<强> Code.gs 强>
function doGet() {
return HtmlService.createTemplateFromFile('Main')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function onLogin(form) {
if (form.username == "fuzzyjulz") {
var template = HtmlService.createTemplateFromFile('Response');
//Setup any variables that should be used in the page
template.firstName = "Fuzzy";
template.username = form.username;
return template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.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();
}
<强> main.html中强>
<?!= 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>
<强>的login.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>
<强> Response.html 强>
<div class="text">
Hi <?= firstName ?>,<br/>
Thanks for logging in as <?= username ?>
</div>