вызов postMessage Реакция собственного компонента WebView приводит к нежелательному побочному эффекту - PullRequest
Новая
       8

вызов postMessage Реакция собственного компонента WebView приводит к нежелательному побочному эффекту

0 голосов
/ 06 июля 2018

Я пытаюсь заставить компонент React Native WebView (на iO) работать в сотрудничестве с веб-сайтом моего клиента. Однако, похоже, проблема с postMessage. Любая помощь будет принята с благодарностью.

Некоторые части сайта используют перезагрузку страницы в качестве механизма опроса. В функции WebView onLoad мне нужно выполнить внедренный скрипт, который вызывает функцию postMessage для связи с приложением ReactNative о состоянии опроса.

Проблема в том, что postMessage каким-то образом прерывает механизм опроса, и в результате страница больше не работает. Страница больше не перезагружается после вызова postMessage. Некоторое время я был озадачен, почему postMessage имеет такой нежелательный побочный эффект.

После добавления обработчика onNavigationStateChange в веб-просмотр, я думаю, у меня есть объяснение. Я вижу, что после вызова postMessage запускается обработчик onNavigationStateChange. URL в соответствующем объекте события имеет реквизит URL со следующим значением: 

react-js-navigation://postMessage?%7B%22msg%22%3A%22test%22%7D

Вероятно, механизм опроса сайта в моем веб-просмотре прерывается этим событием изменения навигации, вызванным postMessage.

Может ли кто-нибудь сказать мне, правильно ли мое предположение, и если да, есть ли способ обойти эту проблему, не изменяя код на сайте, который открывается в веб-представлении?

Заранее спасибо!

Тим

1 Ответ

0 голосов
/ 06 июля 2018

На данный момент я нашел решение, используя опору onNavigationStateChange Webview, отвечающую за обнаружение «onLoad» путем игнорирования событий загрузки, которые следуют друг за другом за короткий промежуток времени. Примерно такая реализация записки: 

handleOnContentNavigationStateChange = (navigationState) => {
    const shouldIgnore = state => {
        return (
            state.loading == true ||
            state.url.startsWith('react-js-navigation:')
        )
    };

    const self = this;

    if (!shouldIgnore(navigationState)) {
        if (self.timeout) {
            clearTimeout(self.timeout);
        }

        self.timeout = setTimeout(self.handleOnContentLoad, 1500);
    }
}
...