Question

我想同时加载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>

Answer 1

如果我对您的理解正确，则希望一次显示所有iframe。

您可以将CSS与display: none一起使用，并在它们全部加载后，将它们重新设置为display: block。

这是一种方法：

const iframes = document.querySelectorAll('iframe');
const allIframes = iframes.length;
let iframeCounter = 0;

for (let iframe of iframes) {
  iframe.onload = () => {
    iframeCounter++;
    if (allIframes === iframeCounter) {
      let css = window.document.styleSheets[0];
      css.insertRule(`
        iframe {
          display: block;
        }
      `, css.cssRules.length);
    }
  }
}

iframe {
  height: 200px;
  width: 100%;
  display: none;
}

<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>

如何同时加载多个iframe？

1 个答案: