JavaScript 如何检查iframe是否存在于另一个iframe中

在本文中，我们将看到如何检查iframe是否存在于另一个iframe中，并通过一个简单的示例来了解它的基本实现。

iFrame是一个允许用户将网页嵌入另一个网页中的HTML元素。它经常用于显示来自另一个网站的内容，比如视频或社交媒体小部件。iFrame可以嵌套在其他iFrame中，这意味着您可以在另一个iFrame内部有一个iFrame。有时，您可能需要检查是否在另一个iFrame中存在一个iFrame，这可能有点棘手。在本文章中，我们将展示如何使用JavaScript来实现这一点。

在继续之前，我们首先了解一下iFrame的工作原理。iFrame本质上是嵌入在另一个HTML文档中的一个独立的HTML文档。当浏览器遇到iFrame元素时，它会创建一个新的浏览上下文（即一个新的窗口或选项卡），并将指定的URL加载到该上下文中。iFrame的内容显示在原始文档中，但它们在技术上是分离的。

iFrame通常在以下情况下使用：

嵌入外部内容： 如果您想嵌入来自第三方网站的内容，例如YouTube视频或社交媒体帖子，您可以使用iFrame。
显示其他页面的内容： 如果您想显示来自您网站的其他页面的内容，您可以使用iFrame。
隔离内容： 如果您想将内容与网页的其余部分隔离开来，例如登录表单或购物车，您可以使用iFrame。

方法： 当一个iFrame存在于另一个iFrame中时，可以通过外部iFrame的contentWindow属性访问嵌入的文档。contentWindow属性返回对嵌入文档的窗口对象的引用。通过检查iFrame的contentWindow属性，我们可以确定它是否包含另一个iFrame。

使用getElementById()获取对外部iframe的引用

var outerIframe = document.getElementById('outer-iframe');

现在我们有一个指向外部iFrame的引用，我们可以使用contentWindow属性来访问嵌入的文档，并获取一个指向内部iFrame元素的引用。

使用contentWindow来获取对内部iFrame的引用

var innerIframe = outerIframe.contentWindow.document.getElementById('inner-iframe');

检查 InnerIframe 是否存在于 OuterIframe 中

现在我们有了对内部 iFrame 元素的引用，可以检查它是否存在于外部 iFrame 中。要做到这一点，我们需要检查 innerIframe 变量是否不为空且具有标签名 ‘iframe’。我们可以使用元素的 tagName 属性来检查其标签名。例如：

if (outerIframe.contentWindow.document.contains(innerIframe)) {
    console.log('Inner iframe is present in the Outer iframe.');
} else {
    console.log('Inner iframe is not present in the Outer iframe.');
}

示例： 在以下示例中，我们将创建一个带有iframe的HTML文件，我们还将嵌套一个另外的iframe在其中，现在我们将使用上述方法来查找iframe是否存在于另一个iframe中。我们将在主HTML文件的script标签中添加Javascript代码来检查iframe是否存在于另一个iframe中。

带有嵌套iframe的HTML代码： 在下面的代码中，window.addEventListener(‘load‘,..)将确保在文档完全加载后才运行script标签中的代码。

index.html

HTML

<!DOCTYPE html> 
<html> 
  
<script> 
    window.addEventListener('load', function () { 
        
        // Get the outer iframe 
        var outerIframe = document.getElementById('outerIframe'); 
  
        // Get the inner iframe 
        var innerIframe =  
            outerIframe.contentWindow.document.getElementById('innerIframe'); 
  
        // Check if the inner iframe is present in the outer iframe 
        if (outerIframe.contentWindow.document.contains(innerIframe)) { 
            console.log('Inner iframe is present in the outer iframe.'); 
        } else { 
            console.log('Inner iframe is not present in the Outer iframe.'); 
        } 
    }); 
</script> 
  
<head> 
    <title> 
          Check if an iframe is present in another iframe 
      </title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
    <h3> 
          How to check if an iframe is  
        present in another iframe? 
      </h3> 
    <iframe width="600" 
            height="400" 
            id="outerIframe"
            src="outer.html"> 
      </iframe> 
</body> 
  
</html>

outer.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Outer Iframe</title> 
</head> 
  
<body> 
    <p>This is Outer iFrame</p> 
    <iframe width="400" 
            height="300" 
            id="innerIframe" 
            src="inner.html"> 
      </iframe> 
</body> 
  
</html>

inner.html: 在下面的文件中，当内部的 iframe 完全加载后，我们将调用 checkIframe() 方法来检查是否有一个 iframe 存在于另一个 iframe 中。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Inner Iframe</title> 
</head> 
  
<body> 
    <p>Hello Geeks, This is Inner iframe!</p> 
</body> 
  
</html>