使用waitForKeyElements与MutationObserver：iframe数据回调仅全页刷新生效问题排查

核心原因 #

1. waitForKeyElements重复注册引发缓存冲突
   waitForKeyElements内部会缓存已匹配元素与监听状态，你在MutationObserver的每次回调中都重复调用waitForKeyElements('#content > div > div > article', actionFunction, true, '#content > iframe')，即便页面动态生成新元素，它也可能因之前的缓存记录，判定元素已处理过而不触发回调。尤其是keepObserving设为true时，重复注册会打乱其内部监听逻辑。

2. 目标选择器与上下文不匹配
   你指定的上下文是#content > iframe，但目标选择器#content > div > div > article是主文档的DOM路径，在iframe的上下文里根本不存在该元素。除了页面刷新时主文档恰好存在该元素的情况，后续动态触发时waitForKeyElements找不到目标，自然不会执行actionFunction。

3. 过早断开MutationObserver
   actionFunction里执行observer.disconnect()，第一次触发后就停止监听，但如果你的场景需要处理多次动态加载，这会导致后续的MutationObserver回调无法执行——不过你提到第二次MutationObserver能调用waitForKeyElements，说明可能第一次执行时addInfo为null，没走到disconnect逻辑，这也暴露了代码的不可靠性。

4. 硬编码DOM索引的脆弱性
   frameDoc.getElementsByTagName("div")[25]完全依赖DOM结构的固定顺序，动态页面中元素顺序极易变化，第二次加载时这个索引对应的元素可能不是目标，甚至不存在，直接导致代码报错中断。

修复后的代码示例 #

// ==UserScript==
// @name         Wait for iframe content
// @version      0.2
// @description  Access iframe content reliably
// @match        https://urlFromPage/*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        GM_addStyle
// ==/UserScript==
/* global $, waitForKeyElements */

// 只注册一次waitForKeyElements，等待iframe加载完成
waitForKeyElements('#content > iframe', handleIframeLoad, true);

function handleIframeLoad(iframeNode) {
    const iframe = iframeNode[0];
    // 等待iframe的文档加载完成
    iframe.onload = function() {
        const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
        // 在iframe文档内等待目标div（替换成你实际的选择器，比如类名或ID）
        waitForKeyElements('div.target-class', function(targetDiv) {
            const addInfo = targetDiv.html();
            if (addInfo) {
                alert(addInfo);
                // 确认获取到内容后，停止iframe加载监听
                iframe.onload = null;
                // 若不需要再监听主文档变化，可断开MutationObserver
                // observer.disconnect();
            }
        }, true, frameDoc);
    };
    // 触发一次onload（防止iframe已提前加载完成）
    if (iframe.contentDocument.readyState === 'complete') {
        iframe.onload();
    }
}

// 若仍需监听主文档content变化（可选）
const targetNode = document.getElementById("content");
const config = { attributes: true, childList: true, subtree: true };
const observer = new MutationObserver((mutationList) => {
    for (const mutation of mutationList) {
        if (mutation.type === 'childList') {
            // 可在这里处理主文档的其他变化，但无需重复注册waitForKeyElements
        }
    }
});
observer.observe(targetNode, config);

关键修复点 #

• 单次注册waitForKeyElements：避免重复注册导致的缓存问题，专注等待iframe本身加载。
• 在iframe上下文内监听元素：直接在iframe的文档中查找目标元素，确保选择器匹配正确的DOM环境。
• 替换硬编码索引：使用类名、ID等稳定选择器定位目标元素，避免DOM结构变化引发错误。
• 正确处理iframe加载状态：通过onload事件和readyState判断，确保iframe内容完全加载后再操作。

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