Javascript 一个接一个地渲染多个iFrame

我有一个URL数组，我想用来在页面上呈现iFrame。我的目标是在显示下一个iframe之前显示iframe的内容，这个过程一直持续到我为数组中的所有URL呈现iframe为止。不确定我做错了什么，下面是我为处理这个问题而编写的脚本。可以很好地处理单个url，但是对于多个url，它会在呈现页面上的任何iframe之前尝试从所有url获取所有内容

<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>

get（'endpointtofetchtheurl'）。然后（data=>{//发出api请求来获取url。
const lti_launch_url=数据['lti_launch_url']
lti_launch_url.forEach（（launch_url，index）=>{
常量iframe=document.createElement（'iframe'）
iframe.sandbox=“允许相同来源允许脚本允许弹出窗口允许表单”
iframe.width=“100%”
iframe.frameBorder=“0”
iframeId=“iframe-”+索引
iframe.id=iframeId
iframe.src=launch\u url
document.body.appendChild（iframe）
iframe.contentWindow.postMessage（样式为“*”）；
})
})

我建议如下。将您的逻辑拉入一个可重用的方法中，该方法执行获取索引的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);

---

forEach

中没有阻止它在加载iframe之前继续迭代的阻塞逻辑。@Taplar您建议我如何执行阻塞？您不必创建阻塞逻辑，只需使用iframe onload事件加载下一个iframe即可。