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

问题描述

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

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.

我已经构建了几个需要用户使用 Apps 脚本输入的应用程序，但我使用的是现已弃用的 UI 服务，因为我不是设计师，这提供了一种简单的方法来设计简单的页面来来回传递数据.由于 UI 服务已被弃用一段时间，我请求将这些服务迁移到 HTML 服务的艰巨任务，并且我注意到行为上的一些差异.

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.

例如，在提交表单时，整个页面刷新为空白页面，我似乎无法阻止这种情况.UI 服务将保持静态以供信息重新输入，而且我找不到使 HTML 服务停止刷新或重新加载表单的工作方法.

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....');
}

索引文件为:

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

我尝试过的一些事情:

1) 向doGet"函数添加回调，以尝试再次加载页面.2) 添加一个全新的函数来尝试调用一个新的 HTML 页面.

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.

这里的问题是我对 HTML 服务的理解很差，但是有没有一种简单的方法可以让我清除表单以重新提交，或者只是重新加载页面?我在 SO 上发现的其他问题都没有以我能理解的方式充分回答这个问题.

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.

推荐答案

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

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."

在此处查看文档: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屋！