资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

js怎么判断有没有iframe

创作时间:

作者:

@小白创作中心

js怎么判断有没有iframe

引用

来源

https://docs.pingcode.com/baike/3791269

在网页开发中，有时需要判断页面中是否存在iframe元素。本文将详细介绍几种常用的判断方法，包括查询文档对象、使用CSS选择器、遍历DOM树和监听iframe加载事件等。

在JavaScript中，判断页面是否包含iframe可以通过以下几种方法：查询文档对象、使用CSS选择器、遍历DOM树、监听iframe的加载事件。其中，最常见的方法是通过 document.getElementsByTagName 或者 document.querySelector 来查找页面中的iframe元素。以下是详细的介绍：

查询文档对象

通过 document.getElementsByTagName 方法，可以直接查询文档中是否存在iframe元素。这个方法返回一个包含所有iframe元素的HTMLCollection，如果该集合的长度大于0，则说明页面中存在iframe。

function hasIframe() {
    var iframes = document.getElementsByTagName('iframe');  
    return iframes.length > 0;  
}

使用CSS选择器

使用 document.querySelector 方法，可以通过CSS选择器来查找文档中的iframe元素。与 getElementsByTagName 类似，这个方法更为灵活，因为它可以使用各种CSS选择器来查找元素。

function hasIframe() {
    return document.querySelector('iframe') !== null;  
}

遍历DOM树

通过遍历整个DOM树，可以检查每一个节点是否是iframe元素。这种方法较为复杂，但对于需要深入检查的情况非常有用。

function hasIframe() {
    function traverse(node) {  
        if (node.nodeName.toLowerCase() === 'iframe') {  
            return true;  
        }  
        var children = node.childNodes;  
        for (var i = 0; i < children.length; i++) {  
            if (traverse(children[i])) {  
                return true;  
            }  
        }  
        return false;  
    }  
    return traverse(document.body);  
}

监听iframe的加载事件

通过监听iframe的加载事件，可以动态判断页面中是否添加了新的iframe元素。这个方法对于动态加载的iframe特别有效。

document.body.addEventListener('DOMNodeInserted', function(event) {
    if (event.target.nodeName.toLowerCase() === 'iframe') {  
        console.log('Iframe added to the document');  
    }  
});

一、查询文档对象

通过查询文档对象的方法，可以快速判断页面是否包含iframe元素。这个方法简洁高效，非常适合大多数应用场景。

使用 `getElementsByTagName`

getElementsByTagName 方法返回一个HTMLCollection，该集合包含了所有与指定标签名匹配的元素。

function hasIframe() {
    var iframes = document.getElementsByTagName('iframe');  
    return iframes.length > 0;  
}

在这个函数中，我们调用 document.getElementsByTagName('iframe') 来获取所有iframe元素。如果返回的集合长度大于0，则说明页面中存在iframe。

使用 `querySelector`

querySelector 方法返回文档中与指定的选择器匹配的第一个元素。如果没有找到匹配的元素，则返回null。

function hasIframe() {
    return document.querySelector('iframe') !== null;  
}

这个方法的好处是可以使用各种CSS选择器，具有更大的灵活性。例如，我们可以查找特定id或class的iframe：

function hasSpecificIframe() {
    return document.querySelector('iframe#myIframe') !== null;  
}

二、遍历DOM树

遍历DOM树的方法适用于需要深入检查的情况。这个方法较为复杂，但可以检查嵌套很深的iframe元素。

递归遍历DOM树

通过递归遍历DOM树，可以检查每一个节点是否是iframe元素。

function hasIframe() {
    function traverse(node) {  
        if (node.nodeName.toLowerCase() === 'iframe') {  
            return true;  
        }  
        var children = node.childNodes;  
        for (var i = 0; i < children.length; i++) {  
            if (traverse(children[i])) {  
                return true;  
            }  
        }  
        return false;  
    }  
    return traverse(document.body);  
}

在这个函数中，traverse 函数递归遍历每一个节点的子节点，检查它们是否是iframe。如果找到iframe元素，则返回true。

使用TreeWalker

TreeWalker 是一个更为高级的DOM遍历工具，可以方便地遍历DOM树的节点。

function hasIframe() {
    var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {  
        acceptNode: function(node) {  
            return node.nodeName.toLowerCase() === 'iframe' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;  
        }  
    });  
    return treeWalker.nextNode() !== null;  
}

在这个函数中，我们创建了一个 TreeWalker，并指定只接受iframe节点。如果找到了iframe节点，则返回true。

三、监听iframe的加载事件

通过监听iframe的加载事件，可以动态判断页面中是否添加了新的iframe元素。这个方法对于动态加载的iframe特别有效。

使用 `DOMNodeInserted` 事件

DOMNodeInserted 事件在节点被插入DOM树时触发。

document.body.addEventListener('DOMNodeInserted', function(event) {
    if (event.target.nodeName.toLowerCase() === 'iframe') {  
        console.log('Iframe added to the document');  
    }  
});

在这个例子中，我们监听 DOMNodeInserted 事件，并检查插入的节点是否是iframe。如果是，则输出一条消息。

使用MutationObserver

MutationObserver 提供了对DOM更为精细的观察能力，可以检测DOM的变化。

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {  
        if (mutation.addedNodes) {  
            mutation.addedNodes.forEach(function(node) {  
                if (node.nodeName.toLowerCase() === 'iframe') {  
                    console.log('Iframe added to the document');  
                }  
            });  
        }  
    });  
});  
observer.observe(document.body, { childList: true, subtree: true });

在这个例子中，我们创建了一个 MutationObserver，并指定观察子节点的变化。如果有新的iframe节点被添加，则输出一条消息。

四、结合多种方法

在实际应用中，我们可以结合多种方法，以确保能够准确判断页面中是否包含iframe元素。

综合示例

function hasIframe() {
    // 方法1：使用getElementsByTagName  
    var iframes = document.getElementsByTagName('iframe');  
    if (iframes.length > 0) {  
        return true;  
    }  
    // 方法2：使用querySelector  
    if (document.querySelector('iframe') !== null) {  
        return true;  
    }  
    // 方法3：遍历DOM树  
    function traverse(node) {  
        if (node.nodeName.toLowerCase() === 'iframe') {  
            return true;  
        }  
        var children = node.childNodes;  
        for (var i = 0; i < children.length; i++) {  
            if (traverse(children[i])) {  
                return true;  
            }  
        }  
        return false;  
    }  
    if (traverse(document.body)) {  
        return true;  
    }  
    // 方法4：监听iframe的加载事件  
    document.body.addEventListener('DOMNodeInserted', function(event) {  
        if (event.target.nodeName.toLowerCase() === 'iframe') {  
            console.log('Iframe added to the document');  
        }  
    });  
    return false;  
}

在这个综合示例中，我们结合了查询文档对象、遍历DOM树和监听iframe加载事件的方法，以确保能够准确判断页面中是否包含iframe元素。

五、最佳实践

在实际开发中，选择合适的方法可以提高代码的效率和可维护性。以下是一些最佳实践建议：

优先使用简单的方法
对于大多数应用场景，使用 getElementsByTagName 或 querySelector 方法足以满足需求。这些方法简洁高效，容易理解和维护。
考虑性能影响
在处理大型DOM树时，遍历DOM树的方法可能会影响性能。因此，应尽量避免在性能敏感的场景中使用递归遍历方法。
动态加载的iframe
对于动态加载的iframe，使用 MutationObserver 可以提供更为精细的观察能力。这个方法可以检测DOM的变化，并在新的iframe被添加时做出响应。
使用合适的工具
在团队协作和项目管理中，可以使用合适的工具来提高效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这些工具提供了丰富的功能，能够帮助团队更好地管理项目和协作。