How to access iFrame parent page using jquery?

在使用 jQuery 访问 iframe 的父页面时，通常的做法是利用 jQuery 提供的 parent() 或 contents() 方法。这里是一个具体如何操作的步骤说明：

步骤 1: 确认同源政策

首先，需要确保 iframe 和父页面符合同源政策（即协议、域名和端口号都相同）。如果不符合同源政策，浏览器会阻止跨源访问，这意味着你不能从 iframe 中访问父页面的 DOM。

步骤 2: 使用 jQuery 访问父页面的 DOM

你可以使用 jQuery 的 parent() 或 contents() 方法来访问父页面。以下是两种常见的使用场景：

场景 1: 从父页面访问 iframe 中的元素

如果你在父页面中需要访问 iframe 内部的元素，可以使用 contents() 方法来获取 iframe 的内容。

javascript
$(document).ready(function() {
    var iframeBody = $("#myIframe").contents().find("body");
    // 现在你可以操作 iframe 中的 body 了，比如：
    iframeBody.append("<p>Hello from Parent!</p>");
});

这里，#myIframe 是 iframe 的 ID。

场景 2: 从 iframe 访问父页面的元素

如果你在 iframe 内部的脚本中需要访问父页面，可以使用 parent() 方法。

javascript
$(document).ready(function() {
    var parentDiv = $(window.parent.document).find("#parentDiv");
    // 现在你可以操作父页面中的 #parentDiv 元素了，比如：
    parentDiv.append("<p>Updated from Iframe!</p>");
});

这里，#parentDiv 是父页面中某个元素的 ID。

注意事项

• 安全性: 在使用这些方法时，请确保你的页面安全，避免潜在的跨站脚本攻击（XSS）。
• 性能考虑: 访问其他框架的 DOM 可能会引起性能问题，尤其是在复杂的页面或多框架应用中。

以上就是通过 jQuery 在不同场景下访问父页面或 iframe 内容的方法。