Динамически добавленный скрипт в теле выполняется перед динамически добавленным скриптом в голове - PullRequest
Новая
       18

Динамически добавленный скрипт в теле выполняется перед динамически добавленным скриптом в голове

0 голосов
/ 16 апреля 2019

У меня есть HTML-страница, которая отправляет запрос на страницу реакции, размещенную в другом домене.Как только я получаю ответ от страницы, я копирую JS из раздела заголовка запрашиваемой страницы в раздел заголовка моей страницы и то же самое для сценария, доступного в разделе тела.

Запрошенная страница - это страница реакции, которая содержит реагировать и реагироватьв разделе заголовка и другой блок JS в разделе тела, который получит копию в тот же раздел на моей странице.

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

Я получаю периодическую ошибку на стороне клиента "ReactDOM не определен".Похоже, что сценарий, скопированный в тело, выполняется до того, как сценарий в заголовке полностью выполнен.

ReactJS и ReactDOM JS находятся в разделе заголовка страницы, а чанк, в котором выдается ошибка в теле. 

external "ReactDOM":1 Uncaught ReferenceError: ReactDOM is not defined
    at Object.faye (external "ReactDOM":1)
    at f (bootstrap:83)
    at Module.7n5H (tes1.ts:18)
    at f (bootstrap:83)
    at Object.0 (test2.ts:114)
    at f (bootstrap:83)
    at t (bootstrap:45)
    at Array.r [as push] (bootstrap:32)
    at 0.9efbe0e7cdf36824.chunk.js?_=1555361723703:1 faye @ external "ReactDOM":1 f @ bootstrap:83 7n5H @ tes1.ts:18 f @ bootstrap:83 0 @ test2.ts:114 f @ bootstrap:83 t @ bootstrap:45 r @ bootstrap:32 (anonymous) @ 0.9efbe0e7cdf36824.chunk.js?_=1555361723703:1

1 Ответ

0 голосов
/ 16 апреля 2019

Это довольно просто, и на самом деле это не имеет никакого отношения к коду, находящемуся в голове или теле, вызов для получения файлов реакции немного медленен, поэтому он не затягивает ваш код в телепоэтому использовать его не определено

Пр.Выпуск 

// this is the we will put in the body 
// log the react object to the console simple
let body = "console.log(React)"

// im using a button to make it easier to understand
document.querySelector('input').onclick = () => {


  // here we are assing a scrupt tag to the head
  // with the link to the react lib
  let headscript = document.createElement('script');
  headscript.src = "https://unpkg.com/react@15/dist/react.js"
  document.querySelector('head').appendChild(headscript);


  // and here we are logging the React object
  // from the body
  let bodyscript = document.createElement('script');
  bodyscript.innerHTML = body;
  document.querySelector('body').appendChild(bodyscript);
};
Click once and wait a bit then click again
<br>
<input type="button" value="click me">

Как видите, это просто старая проблема с асинхронными операциями, решение состоит в использовании обещаний.

Демо 

let body = "console.log(React)"
document.querySelector('input').onclick = () => {
  // request to get the code
  fetch("https://unpkg.com/react@15/dist/react.js")
    // returning it as plain text because that what it is
    .then(response => response.text())
    .then(data => {
      // same as before
      let headscript = document.createElement('script');
      headscript.innerHTML = data;
      document.querySelector('head').appendChild(headscript);

      // and because all code inside the reac lib is not async
      // this is safe to call right after
      let bodyscript = document.createElement('script');
      bodyscript.innerHTML = body;
      document.querySelector('body').appendChild(bodyscript);
    })
};
<input type="button" value="click me">
...