Android WebView中MutationObserver无法检测DOM新增IFRAME问题求助

云原生阿岚

2026-10-5

问题原因

你现有的代码只过滤了mutation.addedNodes中直接是iframe元素的节点，漏掉了「新增节点是父容器、内部包含嵌套iframe」的场景：比如通过innerHTML批量插入<div class="container"><iframe src="xxx"></iframe></div>时，addedNodes里返回的是外层div元素，你的代码不会遍历它的子节点查找iframe，自然捕获不到。
另外nodeName的判断没有兼容大小写，部分特殊场景下可能匹配失败。

修复后代码

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        // 遍历所有新增节点
        mutation.addedNodes.forEach(function (node) {
            // 只处理元素节点
            if (node.nodeType !== 1) return;
            // 检查当前节点是不是iframe
            if (node.nodeName.toUpperCase() === 'IFRAME') {
                handleIframe(node);
            }
            // 遍历当前节点的所有后代节点找iframe
            var iframes = node.querySelectorAll('iframe');
            iframes.forEach(handleIframe);
        });
    });
});

function handleIframe(iframe) {
    // 避免重复绑定事件
    if (iframe.dataset.iframeHandled) return;
    iframe.dataset.iframeHandled = '1';
    // 绑定load事件
    iframe.addEventListener('load', function () {
        console.log('loaded', iframe.src);
    });
    // 兼容已经加载完成的iframe
    if (iframe.complete) {
        console.log('already loaded', iframe.src);
    }
}

// 监听配置保持不变
observer.observe(document, { childList: true, subtree: true });