Рендеринг нескольких фреймов один за другим

Question

У меня есть массив URL, которые я хочу использовать для рендеринга фреймов на странице. Моя цель состоит в том, чтобы содержимое iframe отображалось до отображения следующего iframe, процесс продолжается до тех пор, пока я не отобразил iframe для всех URL-адресов в моем массиве. Не уверен, что я делаю не так, ниже приведен скрипт, который я написал для этого. Хорошо работает с одним URL-адресом, однако для нескольких URL-адресов он пытается извлечь все содержимое из всех URL-адресов перед отображением любого iframe на странице.

<script>
    get('endpoint to fetch the urls').then(data => { // makes api request to fetch the urls.
        const lti_launch_urls = data['lti_launch_urls'] 
        lti_launch_urls.forEach((launch_url, index) => {


                const iframe = document.createElement('iframe')
                iframe.sandbox = "allow-same-origin allow-scripts allow-popups allow-forms"
                iframe.width = "100%"
                iframe.frameBorder = "0"
                iframeId = "iframe-" + index
                iframe.id = iframeId
                iframe.src = launch_url
                document.body.appendChild(iframe)
                iframe.contentWindow.postMessage(style, "*");
        })

    })
</script>

Answer 1

Я бы предложил что-то вроде следующего. Потяните ваши логики c в метод многократного использования, который выполняет генерацию iframe, который принимает индекс. Назовите его, начиная с индекса 0, чтобы показать первый iframe. Затем, когда в iframe обнаружено событие загрузки, снова вызовите метод со следующим индексом для выполнения логической итерации.

    const lti_launch_urls = data['lti_launch_urls'];
    const loadNextIframe = index => {
      if (index >= lti_launch_urls.length) return;

      const launch_url = lti_launch_urls[index];
      const iframe = document.createElement('iframe');

      iframe.sandbox = "allow-same-origin allow-scripts allow-popups allow-forms";
      iframe.width = "100%";
      iframe.frameBorder = "0";
      iframeId = "iframe-" + index;
      iframe.id = iframeId;
      iframe.src = launch_url;

      iframe.addEventListener('load', () => loadNextIframe(++index));

      document.body.appendChild(iframe);
      iframe.contentWindow.postMessage(style, "*");
    };

    loadNextIframe(0);