如何在反应中处理窗口事件侦听器

Question

在反应中，我需要能够打开一个弹出窗口https://developer.mozilla.org/en-US/docs/Web/API/Window/open 并管理诸如“消息”https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 和“加载”和“关闭”事件之类的事件。

但是，我添加侦听器的事件都没有触发......

import * as React from 'react';
import './style.css';
import { useState, useRef } from 'react';

export default function App() {
  const { login, error } = useOAuth();

  return (
    <div>
      <button onClick={login}>Login</button>
    </div>
  );
}

const useOAuth = () => {
  const [error, setError] = useState();
  const popupRef = useRef<Window | null | undefined>();

  const login = () => {
    popupRef.current = openPopup('https://google.com');
    popupRef.current.addEventListener('load', handlePopupLoad);
    popupRef.current.addEventListener('close', handlePopupClose);
    popupRef.current.addEventListener('message', handlePopupMessage);
  };

  const handlePopupLoad = (data) => {
    console.log('load', data);
  };

  const handlePopupClose = (data) => {
    console.log('close', data);
  };

  const handlePopupMessage = (data) => {
    console.log('message', data);
  };

  const openPopup = (url: string) => {
    const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
        width=500,height=600,left=100,top=100`;

    return window.open(url, 'Login', params);
  };

  return {
    login,
    error,
  };
};

https://stackblitz.com/edit/react-ts-qlfw9q?file=App.tsx

在旁边：

1. 有没有办法区分“用户”使用“红色 x”按钮关闭窗口和使用 window.close() 正确关闭窗口的时间。
2. 如何在弹出窗口关闭后很好地清理它。

Answer 1

我已将 URL 更改为本地 URL（以避免任何跨域问题）。

Check out the demo（如果加载失败，请尝试刷新。Stackblitz 似乎有些问题）

在父页面中，我使用了onload（用于加载）、onunload（用于关闭）

import * as React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/auth" element={<AuthPage />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  const login = () => {
    console.clear();

    const url = '/auth';
    const popup = openPopup(url);

    // When the popup loads
    popup.onload = () => {
      console.log('loaded. this was logged');
    };

    // when the popup unloads
    popup.onunload = () => {
      console.log('unloading now');
    };

    // when the popup posts a message
    popup.addEventListener('message', ({ data }) => {
      console.log('message: ', data);
    });
  };

  const openPopup = (url: string) => {
    const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
        width=500,height=600,left=100,top=100`;

    return window.open(url, 'Login', params);
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={login}>Login</button>
    </div>
  );
}

function AuthPage() {

  // I have added a button to trigger postMessage to parent.
  const onClick = () => {
    window.parent.postMessage('To parent');
  };

  return (
    <div>
      <h1>Auth Page</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

我观察到的几件事：

• 由于我们将消息从孩子发送到父母，我希望window.addEventListener('message') 被触发。但是，出于某种原因，popupRef.current.addEventListener('message') 被触发了。
• popupRef.current.onunload 在onload 开始之前被触发。如果我不得不猜测，这是某种清理机制。

Answer 2

我认为没有特定的反应问题，你需要做的就是改变你的登录功能，就像这样。

const login = () => {
    const childWindow = openPopup('https://same-origin.com');
    childWindow.addEventListener('load', handlePopupLoad);
    childWindow.addEventListener('close', handlePopupClose);
    childWindow.addEventListener('message', handlePopupMessage);
  };

Answer 3

好吧，您可能应该将所有事件侦听器包装在 useEffect 中以运行它并在它之后进行清理，它应该看起来像这样

const popupRef = useRef<Window | null>(null)

    const handlePopupLoad = (data: any) => {
        console.log('load', data)
    }

    const handlePopupClose = (data: any) => {
        console.log('close', data)
    }

    const handlePopupMessage = (data: any) => {
        console.log('message', data)
    }

    const openPopup = (url: string) => {
        const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
        width=500,height=600,left=100,top=100`

        return window.open(url, 'Login', params)
    }

    useEffect(() => {
        if (!popupRef.current) {
            return undefined
        }

        popupRef.current = openPopup('https://google.com')
        popupRef.current?.addEventListener('load', handlePopupLoad)
        popupRef.current?.addEventListener('close', handlePopupClose)
        popupRef.current?.addEventListener('message', handlePopupMessage)

        return () => {
            popupRef.current?.removeEventListener('load', handlePopupLoad)
            popupRef.current?.removeEventListener('close', handlePopupClose)
            popupRef.current?.removeEventListener('message', handlePopupMessage)
        }
    }, [popupRef])