Javascript 如何同时加载多个iframe？

我想同时加载10-15个iFrame，这样无论何时从URL接收到数据，它都可以呈现

我曾尝试使用异步函数，但它仍然像一个接一个地加载iframe一样工作

以下是代码：

<iframe src="" height="50" width="320" id="frame_1"></iframe>
<iframe src="" height="50" width="320" id="frame_2"></iframe>
<iframe src="" height="50" width="320" id="frame_3"></iframe>
<iframe src="" height="50" width="320" id="frame_4"></iframe>
<iframe src="" height="50" width="320" id="frame_5"></iframe>

<script>
async function loadIframe1() {
 console.log(1)
 document.getElementById('frame_1').src='file1.html';


}
async function loadIframe2() {
 console.log(2)
 document.getElementById('frame_2').src='file1.html';

 }
async function loadIframe3() {
 console.log(3)
 document.getElementById('frame_3').src='file1.html';

}
async function loadIframe4() {
 console.log(4)
 document.getElementById('frame_4').src='file1.html
}
async function loadIframe5() {
 console.log(5)
 document.getElementById('frame_5').src='file1.html';

}

loadIframe1();
loadIframe2();
loadIframe3();
loadIframe4();
loadIframe5();
</script>

异步函数loadIframe1（）{
控制台日志（1）
document.getElementById（'frame_1'）.src='file1.html'；
}
异步函数loadIframe2（）{
控制台日志（2）
document.getElementById（'frame_2'）.src='file1.html'；
}
异步函数loadIframe3（）{
控制台日志（3）
document.getElementById（'frame_3'）.src='file1.html'；
}
异步函数loadIframe4（）{
控制台日志（4）
document.getElementById（'frame_4'）。src='file1.html
}
异步函数loadIframe5（）{
控制台日志（5）
document.getElementById（'frame_5'）.src='file1.html'；
}
loadIframe1（）；
loadIframe2（）；
loadIframe3（）；
loadIframe4（）；
loadIframe5（）；

如果我理解正确，您希望一次显示所有iFrame

您可以将CSS与

display:none

一起使用，并且在加载所有CSS时，将其设置回

display:block

这是一种方法：

const iframes=document.querySelectorAll（'iframe'）；
const allIframes=iframes.length；
设iframeconter=0；
for（让iframe中的iframe）{
iframe.onload=（）=>{
iframeccounter++；
if（allIframes==iframeCounter）{
让css=window.document.styleSheets[0]；
css.insertRule(`
iframe{
显示：块；
}
`，css.cssRules.length）；
}
}
}

iframe{
高度：200px；
宽度：100%；
显示：无；
}

您的代码目前存在不必要的重复，可以通过使用加载所有iFrame的单一函数进行优化。第二，在函数前面加上

async

并不能像你想象的那样；它与iframe内容的加载方式无关。第三，iframe不能阻止正常执行。看，我已经检查了答案，我想要的是显示所有可用的iframe，而不是一个接一个为什么不从JS创建iframe，而不是在HTML中添加iframe元素？即使我只是简单地编写iframe HTML代码，但在src属性中放入相同的url，所有iframe都不会同时加载检查此链接并让我知道解决您的问题：