如何检测iframe窗口的URL变化？React中实现登录后自动关闭窗口

问题分析 #

你遇到的核心问题是跨域限制：当用window.open打开第三方域名的窗口后，主窗口无法直接访问该窗口的location对象，也无法正常监听其load事件（跨域下浏览器会阻止这类操作），这就是你之前的监听代码失效的原因。

解决方案 #

根据是否能协调第三方页面配合，有两种可行方案：

方案1：轮询检测（无需第三方配合，跨域场景通用） #

通过定期轮询尝试获取窗口的URL，利用try-catch捕获跨域错误，当检测到登录成功的目标URL时关闭窗口。

修改你的组件代码如下：

import { useEffect, useState } from 'react';

const LoginComponent = () => {
  const [iframeWindow, setIframeWindow] = useState<Window | null>(null);
  const iframeurl = "https://third-party-login-url.com"; // 替换为你的第三方登录URL

  useEffect(() => {
    let intervalId: number | null = null;

    if (iframeurl?.length) {
      const windowOptions = "width=400,height=400";
      const myWindow = window.open(iframeurl, "New Window", windowOptions);
      myWindow?.focus();
      setIframeWindow(myWindow);

      // 启动轮询，每500ms检查一次窗口状态
      intervalId = window.setInterval(() => {
        try {
          // 尝试获取窗口URL，跨域时会抛出错误
          const currentHref = myWindow?.location.href;
          if (!currentHref) {
            // 窗口已被手动关闭，清除定时器
            clearInterval(intervalId!);
            return;
          }

          // 替换为你的登录成功URL判断逻辑，比如包含特定路径或参数
          if (currentHref.includes("/login-success") || currentHref.includes("code=")) {
            myWindow.close();
            clearInterval(intervalId!);
            // 这里添加登录成功后的业务逻辑，比如更新用户状态
          }
        } catch (error) {
          // 跨域错误，忽略，继续轮询
        }
      }, 500);
    }

    // 组件卸载时清理定时器和窗口
    return () => {
      if (intervalId) clearInterval(intervalId);
      iframeWindow?.close();
    };
  }, [iframeurl]);

  return <div>登录组件</div>;
};

export default LoginComponent;

方案2：使用postMessage（需要第三方页面配合） #

如果第三方登录成功后重定向的页面可以主动向主窗口发送消息，这种方式更高效优雅。

主窗口代码：

import { useEffect, useState } from 'react';

const LoginComponent = () => {
  const [iframeWindow, setIframeWindow] = useState<Window | null>(null);
  const iframeurl = "https://third-party-login-url.com";

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // 验证消息来源，避免恶意消息，替换为第三方的域名
      if (event.origin !== "https://third-party-domain.com") return;

      // 判断是否为登录成功的消息
      if (event.data.type === "loginSuccess") {
        iframeWindow?.close();
        // 处理登录成功逻辑
      }
    };

    window.addEventListener("message", handleMessage);

    if (iframeurl?.length) {
      const windowOptions = "width=400,height=400";
      const myWindow = window.open(iframeurl, "New Window", windowOptions);
      myWindow?.focus();
      setIframeWindow(myWindow);
    }

    return () => {
      window.removeEventListener("message", handleMessage);
      iframeWindow?.close();
    };
  }, [iframeurl]);

  return <div>登录组件</div>;
};

export default LoginComponent;

第三方重定向页面代码：

在第三方登录成功后的页面中添加以下代码，向主窗口发送消息：

// 替换为你的主窗口域名，或用"*"（不推荐，存在安全风险）
window.opener.postMessage({ type: "loginSuccess" }, "https://your-main-domain.com");

为什么你的原代码失效？ #

1. 跨域限制：当窗口跳转到第三方域名后，主窗口无法访问该窗口的location，也无法触发load事件（浏览器会阻止跨域的DOM访问和事件监听）。
2. 监听时机错误：如果你的监听代码是在窗口打开后才执行，可能窗口已经完成跳转，错过了load事件的触发时机。

内容的提问来源于stack exchange，提问作者Smit lathiya