jQuery 如何使用 jQuery 访问 iFrame 的父页面

在本文中，我们将介绍如何使用 jQuery 访问 iFrame 的父页面。iFrame 是 HTML 中的一个元素，可以将另一个网页嵌入到当前页面中。有时候我们需要在嵌入的 iFrame 页面中访问父页面的元素或执行一些操作，这时就可以使用 jQuery 来实现。

阅读更多：jQuery 教程

使用.parent()方法

jQuery 提供了一个便捷的方法来访问 iFrame 的父页面元素，即 .parent() 方法。这个方法可以返回当前元素的直接父级元素。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div id="parent">
  <h1>父页面</h1>
</div>

<iframe id="myFrame" src="child.html"></iframe>

<script>
(document).ready(function(){
  var parent =("#myFrame").parent();
  parent.css("background-color", "lightblue");
});
</script>

</body>
</html>

在上面的示例中，我们首先定义了一个 id 为 parent 的 div 元素作为父页面，然后在 iFrame 中嵌入了一个名为 child.html 的子页面。在 JavaScript 部分，我们使用 $("#myFrame").parent() 来获取 iFrame 的父页面元素，并将其背景颜色设置为淡蓝色。

使用.contentWindow属性

除了使用 .parent() 方法，我们还可以使用 .contentWindow 属性来访问 iFrame 的父页面。这个属性返回一个指向包含 iFrame 的窗口对象的引用。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div id="parent">
  <h1>父页面</h1>
</div>

<iframe id="myFrame" src="child.html"></iframe>

<script>
(document).ready(function(){
  var parent =("#myFrame")[0].contentWindow.parent;
  $(parent.document.body).css("background-color", "lightblue");
});
</script>

</body>
</html>