页面加载时如何无需JS、无提交按钮点击即可POST表单数据？

首先明确浏览器原生规则限制：纯静态前端无JavaScript、无任何用户交互的环境下，无法在页面加载时自动发起POST请求。
浏览器所有默认的被动资源加载行为（加载图片、CSS、iframe、字体等）仅能发起GET/HEAD请求，只有表单提交可以发起POST请求，但表单提交必须满足两个触发条件之一：要么由JavaScript调用submit()方法触发，要么由用户主动激活提交控件（点击提交按钮、输入框聚焦时按回车等）。这是浏览器为了防范CSRF攻击设置的基础安全规则，没有前端黑科技可以绕过。

你可以根据业务场景选择以下可行方案：

• 方案1：服务端代发请求（完全满足无JS、无点击要求）
  如果你可以控制iframe页面对应的服务端逻辑，这是兼容性最好、最稳定的方案：
  当服务端收到iframe的页面访问请求时，直接在服务端逻辑内向预定义的目标URL发起POST请求，待请求发送完成后，再向浏览器返回iframe的页面内容（可以是空白页、操作成功提示页等任意静态内容）。
  这个方案完全不需要前端执行JavaScript，也不需要用户做任何操作，用户打开iframe页面的同时，POST请求已经由服务端完成发送。如果你的目标接口不强制要求请求必须来自用户浏览器上下文、不依赖用户本地的Cookie/会话信息，这个方案可以100%适配所有JS禁用场景。
• 方案2：无感知覆盖提交（适配必须从用户浏览器发起POST的场景）
  如果业务要求POST请求必须从用户的浏览器上下文发出，可以通过CSS实现用户无感知的提交，不需要用户主动寻找并点击提交按钮：
  编写包含所有POST参数的表单，将提交按钮通过CSS设置为透明、覆盖整个iframe可视区域、处于最高层级，同时给按钮加上autofocus属性。用户打开iframe后，只要在页面区域任意点击，甚至直接按回车键，就会自动触发表单提交，全程不会感知到提交按钮的存在。
  实现代码示例：

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #submit-trigger {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        z-index: 999999;
        border: none;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <form action="你的预定义POST目标地址" method="post">
      <!-- 下方放置所有需要提交的POST参数，以隐藏域形式存在 -->
      <input type="hidden" name="action" value="close_iframe">
      <input type="hidden" name="biz_id" value="你的业务参数值">
      <input type="submit" id="submit-trigger" value="" autofocus>
    </form>
  </body>
  </html>
  

注：如果你的业务要求必须100%无用户交互、且POST请求必须从用户浏览器发出，在禁用JavaScript的前提下没有可实现的方案，这是浏览器安全规范决定的，不存在绕过方式。

内容的提问来源于stack exchange，提问作者Avinash Jeeva