如何从 iframe 访问父函数 - Javascript

在开发网页应用程序时，我们经常需要在页面中嵌入 iframe 元素来显示来自其他网站或应用程序的内容。但是，在 iframe 中，无法直接访问父页面中的函数或变量。本文将向您介绍如何在 iframe 中访问父函数。

方案一：使用 window.parent 对象

通过 window.parent 对象可以访问父页面的函数和变量。以下是示例代码：

// 在 iframe 中获取父页面中的变量
const parentVariable = window.parent.myVariable;

// 在 iframe 中调用父页面中的函数
window.parent.myFunction();

请注意，在上面的代码示例中，myVariable 是父页面中的全局变量，而 myFunction 是父页面中定义的全局函数。

方案二：使用 window.postMessage()

window.postMessage() 方法可以在不同的窗口间传递消息，并允许您发送和接收数据。以下是示例代码：

// 在 iframe 中向父页面发送消息
window.parent.postMessage("Hello, parent!", "*");

// 在父页面中监听来自 iframe 的消息
window.addEventListener("message", event => {
  if (event.source !== childWindow) return; // 防止来自其他来源的消息
  console.log("Received message from iframe: " + event.data);
});

在父页面中，您需要监听来自 iframe 的消息并根据需要处理收到的数据。

在 postMessage() 方法中，第一个参数是发送的数据，第二个参数是接收消息的窗口的源。

总结

在 iframe 中访问父函数有多种方法。通过 window.parent 对象可以直接访问父页面的变量和函数。使用 window.postMessage() 方法可以在不同的窗口间传递消息并传递数据。请选择适合您的情况的方法来实现您的需求。