如何实现所有iframe加载完成后执行指定jQuery函数？

云原生阿岚

2026-8-11

多iframe加载完成后执行函数的解决方案

你当前代码的问题在于：每次任意一个preview-iframe加载完成，都会遍历所有该类iframe执行操作——这会导致已加载完成的iframe被重复处理，同时如果后续iframe还没加载完，也会漏掉未加载的部分。

根据需求不同，有两种可行的解决方式：

方式一：单个iframe加载完成后立即处理自身内容

如果不需要等所有iframe都加载完，而是每个iframe加载好就处理自己的内容，直接修改代码为只操作当前触发load事件的iframe即可：

$('iframe.preview-iframe').on('load', function() {
  // 仅处理当前加载完成的iframe，使用$(this)指向当前元素
  $(this).contents().find('section[rowposition] a').each(function(){
    $(this).append('<span style="position:absolute;left:0;color:red;background:yellow;">' + $(this).attr('href') + '</span>');
  });
});

这种方式更高效，每个iframe加载完成后立刻执行对应操作，不会有重复处理的问题。

方式二：等所有iframe加载完成后统一执行操作

如果必须等所有preview-iframe都加载完成后再一次性执行操作，可以通过统计加载完成的iframe数量来实现：

const $iframes = $('iframe.preview-iframe');
const totalCount = $iframes.length;
let loadedCount = 0;

$iframes.on('load', function() {
  loadedCount++;
  // 当加载完成的数量等于总数量时，执行统一操作
  if (loadedCount === totalCount) {
    $iframes.contents().find('section[rowposition] a').each(function(){
      $(this).append('<span style="position:absolute;left:0;color:red;background:yellow;">' + $(this).attr('href') + '</span>');
    });
  }
});