jQuery如何在指定iframe渲染完成后执行自定义函数

DevOps 小满

2026-10-5

解决方案

你可以直接监听指定ID的iframe的load事件实现需求，该事件会在iframe内部所有资源加载、渲染完全完成后才触发，刚好匹配你的执行时机要求，且只会作用于你指定的单个iframe，不需要遍历所有iframe元素。

基础实现代码

// 将#your-iframe-id替换为你实际使用的iframe元素ID
const $targetIframe = $('#your-iframe-id');

$targetIframe.on('load', function() {
    doSomething($(this));
});

兼容场景实现

如果存在绑定事件时iframe已经完成加载的情况（比如你在后续逻辑中才动态绑定事件），可以增加加载状态判断，避免事件漏触发：

const $targetIframe = $('#your-iframe-id');

const runIframeLogic = function() {
    doSomething($targetIframe);
};

// 判断iframe是否已经加载完成，已完成则直接执行逻辑，未完成则绑定load事件
if ($targetIframe[0].contentWindow.document.readyState === 'complete') {
    runIframeLogic();
} else {
    $targetIframe.on('load', runIframeLogic);
}