javascript - iframe 最初未完全加载，但刷新后可以工作

Question

我的网站上有一个来自 Bandcamp 的嵌入式音乐播放器，第一次加载页面时它通常无法完全加载，但刷新后它将正常工作。不过，它确实部分加载。顶部的图像和播放列表中的歌曲不会显示，但中间包含当前歌曲的区域会显示。

我通常通过在 Chrome 隐身窗口中打开网站来测试这一点，大约 2/3 的时间它不会正确加载 iframe，但有时会。我在 Wordpress 上，尝试禁用 W3 Total Cache 和 Cloudflare，但这似乎并没有影响它。有什么想法或任何方法来检查 iframe 是否已完全加载以及如果没有自动刷新吗？

网站是https://civilaudio.com谢谢!

iframe 代码是:

<iframe id="home_mobile_bandcamp_player" src="https://bandcamp.com/EmbeddedPlayer.html/ref=https%253A%252F%252Fcivilaudio.com%252F/album=2271044833/size=large/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/" seamless><a href="https://civilaudio.bandcamp.com/album/selected-audio-samples">Selected Audio Samples by Civil Audio by Michael Briggs</a></iframe>

Screenshot of problem

Answer 1

我想我找到了解决方案。如果我在 iframe 中的 URL 末尾添加一个随机的假查询字符串，它将强制它正确重新加载。

<iframe id="bandcamp_iframe_left" style="border: 0; width: 100%; height: 900px;" seamless></iframe>
<script>
var iframe = document.getElementById('bandcamp_iframe_left');
iframe.src = 'https://bandcamp.com/EmbeddedPlayer.html/ref=https%253A%252F%252Fcivilaudio.com%252F/album=2271044833/size=large/bgcol=ffffff/linkcol=333333/transparent=true/?ignore='+Math.floor(Math.random() * 1000);
</script>