如何解决嵌入多个iframe播放器导致JS被多次下载
我有时会在一个页面上包含多个 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?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。