如何解决AMP 电子邮件始终在 Gmail 网络应用程序中显示“放弃电子邮件草稿”对话框
AMP 电子邮件在 Gmail 移动应用上运行良好。但是,在网络版本上,当我尝试导航出 AMP 电子邮件而不对表单元素进行任何更改时,它会显示此弹出消息:
放弃电子邮件草稿
在此电子邮件中所做的更改将丢失
我在 amp-list 中有我的表单:
<amp-list items="logs" width="100" height="100" layout="responsive" id="comments"
src="...">
<template type="amp-mustache">
<div class="entry">
...
</div>
{{#last}}
<form id="commentBox" method="post" on="submit-success:comments.refresh,commentBox.clear"
action-xhr="...">
...
</form>
{{/last}}
</template>
</amp-list>
复制步骤:
- 复制此 HTML:
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<Meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async></script>
<script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js" async></script>
<script custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js" async></script>
<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body{ font:small/1.5 Arial,Helvetica,sans-serif; }
.response{ padding-top:5px; padding-bottom:15px; }
.task{
width:100%; margin:auto; padding-top:20px;
border-top:1px solid rgba(0,0.1);
}
.entry{
display:grid; width:98%;
grid-template-columns:80px auto max(110px); column-gap:10px;
grid-template-rows:30px auto; padding-bottom:30px;
grid-template-areas:'status by ago' 'empty message message';
}
.status{ grid-area:status; overflow:hidden; }
.status span{ vertical-align:top; padding:5px 10px;
width:58px; text-align:center; font-size:12px; font-weight:500; line-height:22px;
border-radius: 100px; color: #522AE9; background-color: #dad1fd; }
.by{ grid-area:by; overflow:hidden; font-size:12px; color:#666; padding:5px 5px 5px 0px; }
.message{ grid-area:message; font-size:14px; color:#000; }
.ago{ grid-area:ago; font-size:12px; color:#666; padding:5px 5px 5px 0px; text-align:right; }
#commentBox fieldset{ padding:0px; border:none; }
#commentBox .comment-status{ padding-bottom:10px; font-weight:500; color:#522ae9; }
#commentBox .comment-status[submit-error]{ color:#dc3545; }
#commentBox .comment-status[submit-success]{ color:#1c7e26; }
.comment-Box{
background:#F6F6F6; padding:15px; border-radius:5px;
margin-bottom:20px; text-align:right;
display: grid; grid-template-columns: 1fr 6fr 1fr;
}
.comment-Box textarea{
display:block; width:100%; grid-column-start:1; grid-column-end:8; padding:4px;
font-family:arial; font-size: 14px; line-height: 24px;
color: rgba(0,0.8); background-color: #fff; background-clip: padding-Box;
border: 1px solid rgba(0,0.1); border-radius: 3px;
}
.comment-Box select{
padding:2px; height:28px; margin-top:18px;
font-family:arial; font-size:14px; line-height:16px;
color: rgba(0,0.1); border-radius: 3px;
}
.comment-Box .submit{
display: inline-block; padding: 5px 10px; margin-top:10px; cursor:pointer;
font-size: 14px; line-height:22px; letter-spacing: 0; border-radius: 5px;
color: #fff; background-color: #3f1bca; border: 1px solid #522AE9;
}
@media (max-width:800px){
.status span{ padding:2px 5px; font-size:9px; font-weight:400; }
.by{ font-size:9px; }
.message{ font-size:12px; }
.ago{ font-size:9px; }
.comment-Box textarea{ font-size:12px; }
.comment-Box select{ font-size:12px; }
.comment-Box .submit{ font-size:12px; }
}
@media (min-width:801px){
.status{ padding-top:3px; }
.entry{ column-gap:30px; width:100%; }
}
</style>
</head>
<body>
<div class="task">
<amp-list items="logs" width="100" height="100" layout="responsive" id="comments" src="https://mailrecipe.com/pers/amp/1FAIpQLSfnGpEj7duU4VlD46-5mVgAMvrnNpZesL-WGJQsN3QkMjVCJw/response/2_ABaOnuemdRDB6PSNQviuv-wC0RnvILP7RlGVuL9RiX8VhWjEWGYgaXYKTeY-aMb_JXBtuXo">
<template type="amp-mustache">
<div class="entry">
<div class="status">
<span style="color:{{color}}; background-color:{{bg}};">{{tab}}</span>
</div>
<span class="by">
{{by}}
</span>
<span class="ago">
<amp-timeago height="30" datetime="{{date}}" locale="en">
{{date}}
</amp-timeago>
</span>
<div class="message">{{comment}}</div>
</div>
{{#last}}
<form id="commentBox" method="post" on="submit-success:comments.refresh,commentBox.clear" action-xhr="https://mailrecipe.com/pers/amp/1FAIpQLSfnGpEj7duU4VlD46-5mVgAMvrnNpZesL-WGJQsN3QkMjVCJw/response/2_ABaOnuemdRDB6PSNQviuv-wC0RnvILP7RlGVuL9RiX8VhWjEWGYgaXYKTeY-aMb_JXBtuXo">
<fieldset>
<div class="comment-status" submitting>
Updating your comment ...
</div>
<div class="comment-status" submit-success>
Your comment has been updated!
</div>
<div class="comment-status" submit-error>
Update Failed!
</div>
<div class="comment-Box text-right">
<textarea name="comment" placeholder="Enter your comment"></textarea>
<select name="moveto">
<option value="">- Move to -</option>
<option value="submitted">Submitted</option>
<option value="approved">Completed</option>
<option value="archive">Trash</option>
</select>
<div></div>
<input type="submit" class="submit" value="Send">
<input type="hidden" name="by" value="mani.doraisamy@gmail.com">
</div>
</fieldset>
</form>
<br />
{{/last}}
</template>
</amp-list>
</div>
</body>
</html>
- 转到 Gmail playground 向自己发送 AMP 电子邮件。
- 打开您的 Gmail 网络版并查看此电子邮件
- 离开电子邮件而不对表单字段进行任何更改以查看“放弃”对话框。
如何避免出现此对话框?
解决方法
这看起来像是 AMP 中的一个错误。确定表单是否处于其初始“默认”状态(以及表单最初是否脏)的代码正在检查 defaultSelected
元素的 <option>
属性,该属性将始终为 {{1 }} 如果您没有将 selected HTML 属性添加到 false
元素,即使用户代理会在没有 selected 属性的情况下选择第一个选项:
https://github.com/ampproject/amphtml/blob/6ed742c2d07f4cc4640b5c622d77d53244826dd9/src/form.js#L179
作为一种解决方法,将 <option>
属性添加到您的 selected
下的第一个选项,然后它应该可以工作了。
请参阅 Gmail 开发人员文档中有关此行为的文档:
当电子邮件包含带有输入元素的表单时,如果输入被更改,用户可能会在离开电子邮件而不提交表单之前看到确认信息。在某些情况下不会显示此确认信息,例如用户清除表单或删除消息时。
https://developers.google.com/gmail/ampemail/tips
您无法禁用此对话框。这是 Gmail 用户的一项功能,可防止他们丢失数据。用户在看到对话框后需要执行以下操作之一:
- 点击“取消”并提交表单,这样他们输入的任何待处理数据都不会丢失
- 点击“取消”并清除输入字段以故意丢弃待处理的表单数据
- 点击“丢弃”有意丢弃待处理的表单数据
一旦用户成功提交表单,则不会显示对话框。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。