如何仅在页面存在iframe时运行JavaScript代码？针对YouTube嵌入iframe优化Lighthouse分数的代码问题排查

我来帮你搞定这个问题！你的代码现在不管页面有没有iframe都会执行，核心问题出在判断条件的逻辑错误，再加上那段手动加载YouTube旧脚本的代码导致了404错误。咱们一步步修正：

问题根源 #

document.getElementsByTagName('iframe')返回的是一个HTMLCollection对象——哪怕页面里没有任何iframe元素，这个空的集合对象依然存在，所以你的if条件永远为true，导致代码全程执行。另外，你手动加载的player_ias-vflRCamp0/en_US/base.js是YouTube的旧版本脚本，现在已经不存在了，这就是控制台报404的原因。

修改后的代码 #

// 先检查页面是否存在iframe元素
const iframes = document.getElementsByTagName('iframe');
if (iframes.length > 0) {
  function init() {
    // 遍历所有iframe，替换data-src为src实现延迟加载
    for (let i = 0; i < iframes.length; i++) {
      const iframe = iframes[i];
      if (iframe.getAttribute('data-src')) {
        iframe.setAttribute('src', iframe.getAttribute('data-src'));
      }
    }
  }

  // 使用DOMContentLoaded代替window.onload，更早执行提升性能
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
}

关键优化点 #

• 修正判断逻辑：通过iframes.length > 0来确认页面确实存在iframe元素，只有满足条件才会执行后续代码。
• 移除失效的手动脚本加载：YouTube播放器会在iframe的src被设置后自动加载所需的脚本，不需要手动引入旧版本文件，彻底解决404错误。
• 优化事件触发时机：用DOMContentLoaded代替window.onload，DOM结构加载完成就执行延迟加载逻辑，不用等待图片等资源加载完毕，进一步提升页面性能。

额外提示 #

确保你的iframe标签使用data-src存储YouTube视频链接（比如https://www.youtube-nocookie.com/embed/你的视频ID），初始状态下src属性留空，这样就能实现懒加载，有效提升Lighthouse的性能分数。

内容的提问来源于stack exchange，提问作者Peleke