событие onunload срабатывает перед window.close

#javascript

#javascript

Вопрос:

Я пытаюсь добавить всплывающее окно входа в Spotify на свой веб-сайт. Все готово, но window.unonload запускается до того, как я закрою окно.

Это действительно сведет меня с ума. Я пытаюсь найти решение в течение 2 часов в Интернете, но не смог.

Посмотрите на это изображение. Окно все еще открыто, но запущено событие выгрузки введите описание изображения здесь

 /**
 * @description Spotify Login. Creates New Window.
 */
export const authorize = async () => {

    let url = await axios.get(apiUrl("/api/authorize"));

    var loginWindow = window.open(url.data, "Spotify Login", "width=600,height=800");

    loginWindow.onunload = () => {
        console.log("Fetching Token load");
    }
}
  

Комментарии:

1. В чем именно проблема? Ваша логика явно определяет onunload метод.

2. Когда я открываю новое окно, это событие срабатывает немедленно. Это событие не ожидает window.close. Посмотрите на консоль, но окно все еще открыто. i.imgur.com/VMqu86k.png

3. я предполагаю, что страница перенаправляет, что может вызвать загрузку

4. неясно, как вы будете привязывать событие к окну в другом домене.

5. Не стесняйтесь добавлять свое решение в качестве ответа на сообщение вместо обновления вашего вопроса.

Ответ №1:

Я нашел решение. В новом окне, когда я получаю токен, я сохраняю его в localstorage и закрываю окно. В главном окне я слежу за изменениями в localstorage, затем делаю свои вещи и удаляю событие.

 export const authorize = async () => {
    let url = await axios.get(apiUrl("/api/authorize"));
    window.open(url.data);
    const handleStorage = () => {
        store.commit('setLogged', true);
        store.commit('setStatus');
        window.removeEventListener('storage', handleStorage)
    }
    window.addEventListener('storage', handleStorage);
}