React中iframe内表单修改后点击返回按钮如何提示用户？

问题原因分析 #

你遇到的问题核心在于：

• beforeunload 仅在页面即将被卸载（如刷新、导航到新域名、关闭标签页）时触发，而浏览器返回若属于客户端路由变化（如React Router的单页导航），页面并未卸载，因此不会触发该事件。
• popstate 若未预先向历史栈推入初始状态，首次点击返回可能无法触发；且仅监听事件而不干预历史栈，无法阻止回退行为。
• React Router v5的<Prompt/> 在iframe环境下，可能因父页面与iframe的历史栈不同步，或表单脏状态的绑定逻辑缺失，导致无法正常生效。

解决方案 #

根据iframe与父页面是否同域，提供两种针对性方案：

1. 同域iframe场景 #

直接在iframe内部监听表单状态与popstate事件，手动控制历史栈实现提示与阻止回退：

// 记录表单初始状态，标记是否已修改
let isFormDirty = false;
const form = document.getElementById('target-form');
const initialFormValues = Array.from(form.elements).map(el => el.value);

// 监听表单输入，标记脏状态
form.addEventListener('input', () => {
  const currentValues = Array.from(form.elements).map(el => el.value);
  isFormDirty = !currentValues.every((val, idx) => val === initialFormValues[idx]);
});

// 监听浏览器回退事件
window.addEventListener('popstate', (e) => {
  if (isFormDirty) {
    const confirmLeave = confirm('你有未保存的更改，确定要离开吗？');
    if (!confirmLeave) {
      // 抵消回退操作：重新推入当前状态到历史栈
      history.pushState(null, '', window.location.href);
    } else {
      isFormDirty = false;
    }
  }
});

// 初始化历史栈，确保popstate能触发
history.pushState(null, '', window.location.href);

2. 跨域iframe场景 #

由于跨域限制，需通过postMessage实现iframe与父页面的状态通信，由父页面监听回退事件并提示：

iframe内代码：

let isFormDirty = false;
const form = document.getElementById('target-form');

// 监听表单输入，向父页面发送脏状态
form.addEventListener('input', () => {
  isFormDirty = true;
  // 替换为父页面的实际域名，提升安全性
  window.parent.postMessage({ type: 'FORM_DIRTY', dirty: true }, 'https://parent-domain.com');
});

// 表单保存后重置状态并通知父页面
document.getElementById('save-btn').addEventListener('click', () => {
  isFormDirty = false;
  window.parent.postMessage({ type: 'FORM_DIRTY', dirty: false }, 'https://parent-domain.com');
});

父页面代码：

let iframeHasUnsavedChanges = false;

// 接收iframe发送的状态消息
window.addEventListener('message', (e) => {
  // 验证消息来源域名，防止恶意消息
  if (e.origin !== 'https://iframe-domain.com') return;
  if (e.data.type === 'FORM_DIRTY') {
    iframeHasUnsavedChanges = e.data.dirty;
  }
});

// 监听父页面的回退事件
window.addEventListener('popstate', (e) => {
  if (iframeHasUnsavedChanges) {
    const confirmLeave = confirm('iframe内有未保存的更改，确定要离开吗？');
    if (!confirmLeave) {
      history.pushState(null, '', window.location.href);
    } else {
      iframeHasUnsavedChanges = false;
    }
  }
});

// 初始化历史栈
history.pushState(null, '', window.location.href);

3. React + React Router v5 场景 #

结合<Prompt/>与手动popstate监听，确保iframe内的路由变化与浏览器回退都能触发提示：

import { Prompt, useHistory } from 'react-router-dom';
import { useState, useEffect } from 'react';

export default function EditableForm() {
  const [isDirty, setIsDirty] = useState(false);
  const history = useHistory();

  useEffect(() => {
    const handlePopState = () => {
      if (isDirty) {
        const confirmLeave = confirm('你有未保存的更改，确定要离开吗？');
        if (!confirmLeave) {
          // 抵消回退，保持当前路由
          history.push(history.location.pathname);
        } else {
          setIsDirty(false);
        }
      }
    };

    window.addEventListener('popstate', handlePopState);
    // 初始化历史栈状态
    history.push(history.location.pathname);

    return () => window.removeEventListener('popstate', handlePopState);
  }, [isDirty, history]);

  return (
    <>
      {/* React Router内置的路由跳转提示 */}
      <Prompt
        when={isDirty}
        message="你有未保存的更改，确定要离开吗？"
      />
      <form
        onInput={() => setIsDirty(true)}
        onSubmit={(e) => {
          e.preventDefault();
          // 处理表单提交逻辑
          setIsDirty(false);
        }}
      >
        <input type="text" placeholder="输入内容..." />
        <button type="submit">保存</button>
      </form>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Mitchel Sarauer