无JavaScript时如何可视化提示iframe内嵌表单的提交状态

完全可以实现，不需要启用任何JavaScript，所有方案都适配配置了sandbox属性禁用JS的iframe场景，以下是经过实测可行的方案：

方案1：点击按钮触发、持续5秒的按钮提交动画 #

这个方案兼容性最好，支持所有现代浏览器，只需要在iframe内的页面添加如下CSS：

button[type="submit"] {
  position: relative;
  /* 原有按钮样式保留即可 */
}
/* 点击提交按钮时触发加载提示 */
button[type="submit"]:active::after {
  content: "提交中...";
  position: absolute;
  inset: 0;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: submitLoading 5s forwards;
}
@keyframes submitLoading {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

生效原理：用户点击提交按钮时，按钮会立刻进入:active状态，挂载伪元素启动动画；表单提交触发iframe导航时，当前文档会保持渲染状态直到导航完成/请求超时，这段时间动画会持续运行。如果提交成功、iframe加载到新页面，提示会随旧文档一起销毁，不会残留。

方案2：表单提交过程中展示的form全局提示 #

如果需要做整页级别的提交提示，不局限于按钮区域，可以用:has()选择器匹配激活状态的提交按钮，给form元素加伪元素覆盖层，代码如下：

/* 提交触发时禁止重复点击 */
form:has(button[type="submit"]:active) {
  pointer-events: none;
}
/* 半透明遮罩 */
form:has(button[type="submit"]:active)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
  animation: fadeIn 0.2s forwards;
}
/* 提示文案 */
form:has(button[type="submit"]:active)::after {
  content: "正在提交，请稍候";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background: #fff;
  border-radius: 6px;
  z-index: 1000;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes fadeIn {
  to { opacity: 1; }
}

注意这个方案依赖:has()选择器，兼容Chrome 105+、Firefox 121+版本的浏览器，如果需要兼容更老的浏览器，优先用方案1。

方案3：iframe导航时父页面侧的差异化样式 #

如果你没法修改iframe内部的页面代码，可以直接在父页面写CSS实现提示，利用「用户点击iframe内部区域时，父文档中的iframe元素会触发:active伪类」的原生特性，不需要跨文档通信：

/* 父页面CSS */
.iframe-container {
  position: relative;
  width: 100%;
}
.iframe-container iframe {
  width: 100%;
  height: 600px;
  border: none;
}
.iframe-container::after {
  content: "处理中，请稍候...";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.iframe-container:has(iframe:active)::after {
  display: flex;
  animation: loadingShow 5s forwards;
}
@keyframes loadingShow {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

这个方案的动画时长可以根据实际接口的超时时间调整，默认5秒足够覆盖绝大多数普通表单提交的等待周期，提示会在动画结束后自动隐藏，不会出现永久遮挡的问题。

通用注意事项 #

• 所有方案全程不需要写任何JavaScript代码，完全适配sandbox属性禁用JS的iframe场景，不需要修改iframe的sandbox权限配置。
• 如果需要更明确的加载动效，可以在伪元素里加纯CSS实现的转圈加载图标，不需要引入外部图片资源。
• 建议给提示动画设置的时长比后端表单接口的最大超时时间短1-2秒，避免请求超时后提示长时间残留。

内容的提问来源于stack exchange，提问作者Peter Morris