AMP 电子邮件始终在 Gmail 网络应用程序中显示 "Discard email draft" 对话框
AMP Email always shows "Discard email draft" dialog box in Gmail web app
AMP 电子邮件在 Gmail 移动应用程序上运行良好。但是在网络版本上，当我尝试在不对表单元素进行任何更改的情况下导航出 AMP 电子邮件时，它会显示此弹出消息：
Discard email draft
Changes made within this email will be lost
我的表格在放大器列表中：
<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,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,0,0.8); background-color: #fff; background-clip: padding-box;
border: 1px solid rgba(0,0,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,0,0.8); background-color: #fff; background-clip: padding-box;
border: 1px solid rgba(0,0,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 网络版并查看此电子邮件
- 在不对表单字段进行任何更改的情况下导航出电子邮件以查看“放弃”对话框。
如何避免出现此对话框？
请参阅 Gmail 开发人员文档中有关此行为的文档：
When the email contains a form with input elements, if the inputs are changed the user may see a confirmation before navigating away from the email without submitting the form. This confirmation isn't shown in some cases, such as if the user clears the form or upon message deletion.
https://developers.google.com/gmail/ampemail/tips
您无法禁用此对话框。这是 Gmail 用户防止数据丢失的一项功能。用户需要在看到对话框后执行以下操作之一：
- 点击“取消”并提交表单，这样他们输入的任何待处理数据都不会丢失
- 单击“取消”并清除输入字段以有意丢弃待处理的表单数据
- 点击“丢弃”有意丢弃待处理的表单数据
一旦用户成功提交表单，则不会显示对话框。
这看起来像是 AMP 中的错误。确定表单是否处于初始“默认”状态（以及表单最初是否脏）的代码正在检查 <option> 元素的 defaultSelected 属性，该属性将始终为 false 如果您没有将选定的 HTML 属性添加到 <option> 元素，即使用户代理将在缺少选定属性的情况下选择第一个选项：
https://github.com/ampproject/amphtml/blob/6ed742c2d07f4cc4640b5c622d77d53244826dd9/src/form.js#L179
作为解决方法，将 selected 属性添加到 <select> 下的第一个选项，然后它应该可以工作。
AMP 电子邮件在 Gmail 移动应用程序上运行良好。但是在网络版本上，当我尝试在不对表单元素进行任何更改的情况下导航出 AMP 电子邮件时，它会显示此弹出消息：
Discard email draft
Changes made within this email will be lost
我的表格在放大器列表中：
<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,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,0,0.8); background-color: #fff; background-clip: padding-box;
border: 1px solid rgba(0,0,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,0,0.8); background-color: #fff; background-clip: padding-box;
border: 1px solid rgba(0,0,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 网络版并查看此电子邮件
- 在不对表单字段进行任何更改的情况下导航出电子邮件以查看“放弃”对话框。
如何避免出现此对话框？
请参阅 Gmail 开发人员文档中有关此行为的文档：
When the email contains a form with input elements, if the inputs are changed the user may see a confirmation before navigating away from the email without submitting the form. This confirmation isn't shown in some cases, such as if the user clears the form or upon message deletion.
https://developers.google.com/gmail/ampemail/tips
您无法禁用此对话框。这是 Gmail 用户防止数据丢失的一项功能。用户需要在看到对话框后执行以下操作之一：
- 点击“取消”并提交表单，这样他们输入的任何待处理数据都不会丢失
- 单击“取消”并清除输入字段以有意丢弃待处理的表单数据
- 点击“丢弃”有意丢弃待处理的表单数据
一旦用户成功提交表单，则不会显示对话框。
这看起来像是 AMP 中的错误。确定表单是否处于初始“默认”状态（以及表单最初是否脏）的代码正在检查 <option> 元素的 defaultSelected 属性，该属性将始终为 false 如果您没有将选定的 HTML 属性添加到 <option> 元素，即使用户代理将在缺少选定属性的情况下选择第一个选项：
https://github.com/ampproject/amphtml/blob/6ed742c2d07f4cc4640b5c622d77d53244826dd9/src/form.js#L179
作为解决方法，将 selected 属性添加到 <select> 下的第一个选项，然后它应该可以工作。