Событие загрузки окна из внешнего скрипта JS никогда не запускается в React PWA - PullRequest
Новая
       101

Событие загрузки окна из внешнего скрипта JS никогда не запускается в React PWA

0 голосов
/ 20 июня 2020

Я работаю над PWA на основе React. Для использования внешней службы мне нужно добавить сценарий JS во время выполнения. В настоящее время я добавляю его (в соответствии с инструкциями, предоставленными службой) в документ следующим образом: 

function initializeScript() {
    const script = document.createElement('script');

    script.id = 'source-script';
    script.src = 'https://some.url.com';

    document.body.appendChild(script);
}

Добавление сценария выполнено успешно, поскольку в браузере доступен следующий код. 

if (document.querySelector('#dom-source')) {
  console.info("Binding to the window.onload event");

  window.onload = function() {
    console.info("The parent window is loaded");
    // some code
  };
}

Выполняется первый console.info. Однако - и это моя основная проблема - после этого функция window.onload не выполняется. Я думаю, это связано с тем, что я использую React, и он почему-то никогда не запускает событие onload.

Есть ли обходной путь или я что-то упускаю? Я не могу изменить исходный код добавленного кода JS, так как он от внешнего поставщика. Также я должен добавить его динамически после некоторой работы по инициализации элемента #dom-source.

Любая помощь будет очень признательна! Спасибо!

ОБНОВЛЕНИЕ:

После некоторых проб и ошибок и на основе этого Как мне использовать внешний скрипт, который я добавляю, чтобы реагировать JS? ответ Я придумал со следующим полу-рабочим решением: 

    let A: any;

    const scriptLoaded = useCallback(() => {
        console.info('script loaded');
        // @ts-ignore
        A = new A() // A is a class in the external JS file
        A.someFunctionOfScript();
    }, [])
    
    useEffect(() => {
        const script = document.createElement('script');
        script.id = 'source-script';
        script.src = 'some.url.com'

        script.onload = () => scriptLoaded();

        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script);
        };
   }, [token]);

Вместо ожидания события window.onload я выполняю функцию scriptLoaded. Его код просто вставлен из функции window.onload внешних файлов.

Так что это отлично работает до размонтирования или переключения маршрута. Я получаю исключения из внешнего файла. Он в основном пытается выполнить код, но такие элементы, как #dom-source, больше не доступны. Ну, по крайней мере, скрипт сейчас выполняется.

Кто-нибудь знает, как остановить выполнение скрипта и удалить все ссылки на него при размонтировании?

...