防止HTML页面刷新 [英] Prevent HTML Page Refresh

问题描述

在这个阶段，我主要用于后端Javascript和服务器端Java，所以我的HTML并不像它需要的那么精明。

我已经构建了几个应用程序，需要使用Apps脚本的用户输入，但我使用的是现在已弃用的 UI服务，因为我不是设计师，这提供了一个简单的方法来设计简单的页面来回传递数据。随着UI服务已被弃用一段时间，我乞求将这些服务迁移到HTML服务的艰巨任务，并且我注意到一些行为上的差异。例如，在提交表单时，整个页面会刷新到空白页面，而我似乎无法阻止这种情况发生。 UI服务对于重新输入信息将保持静态，并且我找不到工作方法来让HTML服务停止刷新或重新加载表单。

简单代码重现我的问题：

 函数doGet（） {
 return HtmlService.createHtmlOutputFromFile（'test'）
 .setSandboxMode（HtmlService.SandboxMode.IFRAME）; 
} 
 
函数logValues（value）{
 Logger.log（'Something worked ....'）; 
} 
  

索引文件为：

 < form> 
< input type =submitvalue =Book Meetingonclick =google.script.run 
 .logValues（）> 
< / form> 
  

我试过的一些东西：

1）向doGet函数添加回调，尝试重新加载页面。
2）添加一个全新的函数来尝试和调用一个新的HTML页面。

这里的问题是我对HTML服务的理解不足，但是在那里一个简单的方法，我可以清除表单重新提交，或者只是重新加载页面？我发现的其他问题都没有以我能理解的方式充分回答这个问题。

解决方案

由于您在技术上通过点击提交按钮来提交表单，那么会创建页面刷新。您需要使用preventDefault函数取消提交事件，该函数如果可以取消该事件，则取消该事件，而不会停止进一步传播该事件。

请参阅文档： https://developer.mozilla.org/en-US/ docs / Web / API / Event / preventDefault

因此，也许你可以尝试以下几行（直接从文档中获得）：

 函数stopDefAction（evt）{
 evt.preventDefault（）; 
} 
 
 document.getElementById（'my-checkbox'）。addEventListener（'click'，stopDefAction，false）; 
  

另一个选项是删除表单/输入元素，并简单地使用一个按钮元素， t在点击时触发页面刷新。

At this stage I'm mostly used to backend Javascript and server side Java, so my HTML is not as savvy as it needs to be.

I've built several applications that require user input with Apps script, but I was using the now deprecated UI service, as I'm not a designer and this provided an easy way to design simple pages to pass data back and forth. With the UI service having been deprecated for some time, I'm begging the arduous task of migrating these services to the HTML service, and I'm noticing some difference in behavior.

For example, when submitting a form, the entire page refreshes to a blank page, and I can't seem to prevent that. The UI service would remain static for information re-entry, and I can't find a working method to get the HTML service to either stop refreshing or reload the form.

Simple code to reproduce my issue:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('test')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function logValues(value){
  Logger.log('Something worked....');
}

With the index file being:

<form>
<input type="submit" value="Book Meeting" onclick="google.script.run
        .logValues()">
</form>

Some things I've tried:

1) Adding a callback to the 'doGet' function, to attempt to get the page to load again. 2) Adding a whole new function to try and call a NEW HTML page.

The issue here is my poor understanding of the HTML service, but is there a simple way for me to just clear the form for re-submission, or alternatively just reload the page? None of the other questions I've found on SO adequately answer this question in a way I can understand.

解决方案

Since you're technically submitting your form by clicking the submit button, then that creates the page refresh. You need to cancel the submit event with the preventDefault function, which "Cancels the event if it is cancelable, without stopping further propagation of the event."

See the docs here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

So maybe you can try something along these lines (straight from the docs):

function stopDefAction(evt) {
    evt.preventDefault();
}

document.getElementById('my-checkbox').addEventListener('click', stopDefAction, false);

Another option is to remove the form/input elements and simply use a button element instead, which doesn't trigger a page refresh on click.

这篇关于防止HTML页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！