我是否已达到每页 iframe 的最大限制？

Question

有没有办法每页显示超过1000个iframe？我以为没有上限，但我似乎找到了。

我正在开发一个混合移动应用程序，我可以根据请求显示 iframe。这些 iframe 保存在 1 到 1200 的编号范围内。但是，当请求的范围大于 1000 时，不会显示 iframe。

让我用一些代码来说明：

    <span id="1000" style="display:none;">
        <br><br><br>
        <span style="display:block;margin-left:auto;margin-right:auto;width:70%;-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);">
            <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/tracktokenhere1"
                width="100%" height="152" frameBorder="0" allowfullscreen=""
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"></iframe>
        </span><br>
        <div class="flip3D" onclick="flipCard()" style="margin: 0 auto;">
            <div class="card">
                  <!-- This content is always displayed when requested -->
            </div>
        </div>
    </span>
    <span id="1001" style="display:none;">
        <br><br><br>
        <span style="display:block;margin-left:auto;margin-right:auto;width:70%;-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);">
            <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/tracktokenhere2"
                width="100%" height="152" frameBorder="0" allowfullscreen=""
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"></iframe>
        </span><br>
        <div class="flip3D" onclick="flipCard()" style="margin: 0 auto;">
            <div class="card">
                  <!-- This content is always displayed when requested -->
            </div>
        </div>
    </span>

因此，当我请求 span id="1000" 时，我可以毫无问题地看到 Spotify 内容。但是，当我请求 id="1001" 时，我可以看到 span 的其余内容，但 iframe 内容丢失了。

起初，我以为 id="1001" 中有什么东西是错误的，但是我注释掉了 id="1000"，id="1001" 变成了“可见”。所以我得出的结论是iframe显示有最大限制。

如何摆脱这个限制？

我的加载时间没有问题，我已经解决了。

Answer 1

尝试使用有效的 HTML

也许浏览器厌倦了尝试解释无效的 HTML

此外，如果您使用 div 和适当的边距，您就可以删除 BR

<div id="1000" style="display:none;">
  <div style="margin-top:10px; display:block;margin-left:auto;margin-right:auto;width:70%;-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);">
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/tracktokenhere1" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
  </div>
  <div class="flip3D" onclick="flipCard()" style="margin: 0 auto;">
    <div class="card">
      <!-- This content is always displayed when requested -->
    </div>
  </div>
</div>