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>