Передача данных из всплывающего окна с использованием EventListener и postMessage в React - PullRequest
Новая
       14

Передача данных из всплывающего окна с использованием EventListener и postMessage в React

0 голосов
/ 14 мая 2019

Я работаю на oAuth-логине, он работает нормально, но весь процесс перенаправления на авторизацию и ответ происходит на одной странице.Я пытаюсь открыть его во всплывающем окне.

Чтобы добиться этого, мне нужно добавить EventListener на родительскую страницу (например, там, где кнопка «connect using github»).Вот код: 

let popup = window.open(window.location.origin+`/socialProcess?site=github`, width=600, height=600);
popup.addEventListener("message", (response) => {
        if (response.origin !== window.location.origin) {
            return;
        }
        let data = response.data;
        if (data.success) {
            alert(this.state.userName + " account accessed successfully");
        }
    }, false);

На дочерней странице, которая загружается по маршруту /socialProcess, я сначала перезагружаю всплывающую страницу в URL-адрес oAuth социальных сетей, а после авторизации - URI ответа.возвращается к /socialProcess (все происходит в одном и том же всплывающем окне).Используя полученные данные (после их обработки), я затем пытаюсь отправить их родительской функции слушателя тремя различными способами, например так: 

window.opener.postMessage({success: this.state.success}, this.state.page);
window.postMessage({success: this.state.success}, this.state.page);
parent.postMessage({success: this.state.success}, this.state.page);

Но, похоже, функция слушателя не запускается.

Мне кажется, проблема в том, что всплывающая страница самостоятельно перезагружается при загрузке страницы социального oauth, а затем URI ответа.Потому что, если я добавлю window.postMessage({success: true}, this.state.page); до перезагрузки, моя родительская страница получит данные.

Что меня больше всего смущает, так это то, что если я добавлю window.opener.location.reload(); под postMessage (после перезагрузки всплывающего окна), моя родительская страницаперезагрузка означает, что она помнит, кто ее открыл, так почему window.opener.postMessage({success: this.state.success}, this.state.page); не работает?слушатель просто умирает, когда всплывающее окно перезагружается?

Что я делаю не так?Есть ли другой способ сделать это?Спасибо!

1 Ответ

0 голосов
/ 14 мая 2019

Мне удалось решить мою проблему. Прежде всего, вот правильное сообщение: window.postMessage.

В моем примере я передал window.postMessage({success: this.state.success}, this.state.page); значение this.state.page должно быть строкой, поскольку слушатель ожидает получения «сообщения».

Это означает, что мне нужно преобразовать любой объект в строку, используя, например, Json stringify.

Выполнение этого и передача моих значений в виде строки (затем их синтаксический анализ) решили мою проблему.

...