谷歌Chrome废弃跨源iframe下prompt后替代方案及React Router Prompt替换问询

不久前谷歌Chrome宣布即将废弃跨源iframe下的alert()、confirm()以及prompt方法。由于Web开发者社区的强烈反对，该废弃计划已多次推迟，相关变更最早2022年1月之后才会生效。不过很多开发者已经在寻找替代方案应对不确定的落地时间，其中一项常见需求是替换react-router自带的Prompt组件。

react-router Prompt组件说明 #

根据官方文档说明：

Prompt组件用于在用户离开页面前发起询问，当你的应用进入需要阻止用户跳转的状态（比如表单填写了一半）时，就可以渲染Prompt组件。

原有实现示例 #

原来的封装实现代码如下：

function NavigationWarningImpl({ enabled, message }: Props) {
  useEffect(() => {
    if (enabled && Platform.OS === 'web') {
      const listener = (event: any) => {
        // 按标准要求取消默认事件
        event.preventDefault()
        // Chrome要求必须设置returnValue
        event.returnValue = ''
      }

      window.addEventListener('beforeunload', listener)

      return () => {
        window.removeEventListener('beforeunload', listener)
      }
    }
  }, [enabled])

  return <Prompt when={enabled} message={message} />
}

替代解决方案 #

这里提供两类实现方案，可根据自身技术栈选择：

1. 通用原生JS方案（兼容所有框架/无框架场景） #

核心思路是拦截所有触发导航的操作，结合自定义模态弹窗替代原生弹窗：

• 拦截beforeunload事件处理页面刷新、关闭、跳转外部站的场景，按照浏览器规范设置event.returnValue即可触发浏览器自带的离开确认弹窗，该弹窗不受跨源iframe废弃规则影响
• 对于站内跳转的场景，拦截所有a标签点击、history相关API调用：
  • 重写history.pushState、history.replaceState、history.back、history.forward方法，触发时先判断是否需要弹窗确认
  • 给所有a标签绑定点击事件捕获逻辑，匹配需要拦截的场景时先阻止默认跳转，弹出确认框后再决定是否继续跳转
• 自定义弹窗完全使用DOM实现，不依赖任何原生alert/confirm/prompt方法，规避跨源限制。

2. React + react-router专属替换方案 #

完全替代原有Prompt组件，无需依赖react-router内置的Prompt逻辑：

• 首先利用react-router提供的useBlocker钩子（v6版本官方提供，专门用于拦截导航）替代原有Prompt组件，避免依赖内部的confirm调用
• 自定义模态弹窗组件接收确认/取消回调，拦截到导航事件时先暂停跳转，弹出自定义弹窗
• 用户点击确认时调用continue()方法放行导航，点击取消时调用reset()方法终止导航
• 保留原有beforeunload事件监听逻辑，覆盖刷新、关闭页面等非react-router控制的跳转场景

核心实现代码示例：

import { useBlocker } from 'react-router-dom';
import { useEffect, useState } from 'react';
// 你的自定义模态弹窗组件
import CustomConfirmModal from './CustomConfirmModal';

function NavigationWarning({ enabled, message }: { enabled: boolean, message: string }) {
  const [showModal, setShowModal] = useState(false);
  const [pendingNavigation, setPendingNavigation] = useState<(() => void) | null>(null);

  // 拦截react-router控制的站内导航
  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) => enabled && currentLocation.pathname !== nextLocation.pathname
  );

  useEffect(() => {
    if (blocker.state === 'blocked') {
      setShowModal(true);
      setPendingNavigation(() => blocker.proceed);
    }
  }, [blocker]);

  // 监听刷新/关闭页面等外部跳转
  useEffect(() => {
    if (!enabled) return;
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = message;
      return message;
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [enabled, message]);

  const handleConfirm = () => {
    setShowModal(false);
    pendingNavigation?.();
  };

  const handleCancel = () => {
    setShowModal(false);
    blocker.reset?.();
    setPendingNavigation(null);
  };

  return (
    <CustomConfirmModal
      visible={showModal}
      content={message}
      onConfirm={handleConfirm}
      onCancel={handleCancel}
    />
  );
}

注意事项 #

• 所有自定义弹窗需要实现为当前页面的顶级DOM元素，不要放到跨源iframe内渲染即可完全规避Chrome的废弃规则限制
• 浏览器自带的beforeunload确认弹窗的文案由浏览器固定，无法自定义，不接受该限制的场景可以仅对跳转外部站的场景使用该机制，站内跳转全量走自定义弹窗

内容的提问来源于stack exchange，提问作者Zoltan Szokodi