防止多个iframe加载到移动设备上

Question

我正在建立客户的网站。它在iframe中从Vimeo加载多个视频。在移动设备上，这会导致问题，因为该页面需要很长时间才能加载。我不想在手机上加载它们。

我的问题是我只想出了如何通过使用以下脚本来停止一个iframe的加载：

<script>
if (window.matchMedia("(min-width: 720px)").matches) {
  let iframe = document.getElementById('iframe-1')
  iframe.src = iframe.getAttribute('data-src')
}
</script>

我需要怎么做才能选择页面上的所有iframe？

Answer 1

您可以使用document.querySelectorAll('iframe')来选择所有iframe。

它将返回u NodeList（不是常规数组）。

您可以对其进行迭代，并进行相同的属性替换。

const iframes = document.querySelectorAll('iframe');
Array.from(iframes).forEach((iframe) => {
  iframe.src = iframe.getAttribute('data-src')
});