问题描述
我有时会在一个页面上包含多个 Soundcloud 播放器（用于不同的歌曲）。我注意到它确实减慢了页面的加载和谷歌“速度得分”（PageSpeed Insights），因为每个新嵌入的 iframe 都会多次重新加载相同的 Javascript！ （我在 Chrome 开发者工具的“网络”标签中看到了这一点）。
例如：以下代码将下载 4 次相同的 Javascript 代码。
问题：如何只加载一次 Soundcloud JS 并在同一页面上显示 4 首不同歌曲的 4 个播放器？
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/426202317&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/426202317&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/426202317&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/426202317&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false"></iframe>我注意到 Youtube 内嵌 <iframe> 的类似行为，这是来自 PageSpeed Insights 的屏幕截图：
解决方法
我相信 Iframes 只能指向一个来源，但我认为您可能会发现这篇文章很有用。 Can an `<iframe>` hold multiple pages inside of it?