如何正确判断iFrame内部的body元素是否存在实际内容

前提说明 #

本方案仅适用于同域iframe，若iframe加载的是跨域资源，浏览器同源策略会禁止读取iframe内部内容，无法实现该检测需求。

实现思路 #

你之前的逻辑只判断了<body>元素是否存在，而即使是空页面也会默认生成<body>标签，所以会一直返回true。我们需要额外过滤掉<body>内的无效内容：空白文本、注释节点、无实际内容的空标签，最终判断是否存在有效内容。

改进后代码（基于你当前使用的jQuery写法） #

function check_iframe_body_content(element) {
    // 递归判断节点是否包含实际有效内容
    function hasValidContent(node) {
        // 注释节点直接判定为无效
        if (node.nodeType === 8) return false;
        // 文本节点：去除首尾空白后不为空则有效
        if (node.nodeType === 3) return node.textContent.trim() !== '';
        // 元素节点判断
        if (node.nodeType === 1) {
            // 可替换元素（img/input/video/audio等）本身就算有效内容
            const voidTags = ['IMG', 'INPUT', 'VIDEO', 'AUDIO', 'CANVAS', 'IFRAME', 'HR', 'BR'];
            if (voidTags.includes(node.tagName)) return true;
            // 普通元素遍历所有子节点判断是否有有效内容
            for (let child of node.childNodes) {
                if (hasValidContent(child)) return true;
            }
            return false;
        }
        return false;
    }

    const $body = element.contents().find('body');
    // body不存在直接返回false
    if ($body.length === 0) return false;
    // 遍历body的所有子节点判断是否有有效内容
    for (let child of $body[0].childNodes) {
        if (hasValidContent(child)) return true;
    }
    return false;
}

注意事项 #

必须在iframe完全加载完成后再调用该函数，否则会出现判断误差，调用示例如下：

$('iframe').on('load', function() {
    const hasContent = check_iframe_body_content($(this));
    console.log('iframe是否有实际内容：', hasContent);
})

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