从 iframe 调用父窗口函数

在 web 开发中，有时我们需要在 iframe 中嵌入一个页面，但是这个页面可能需要与父窗口进行通信，例如调用父窗口的函数。本文将介绍如何在 iframe 中调用父窗口函数。

方法一：使用 window.parent

在 iframe 中，可以通过 window.parent 获取父窗口的 window 对象。因此，我们可以通过 window.parent 调用父窗口的函数。

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

方法二：使用函数指针

我们也可以在父窗口中定义一个函数指针，然后在子窗口中通过 window.parent 调用这个函数指针。

// 在父窗口中定义一个函数指针
var myFunctionPointer = function() {};

// 在子窗口中调用父窗口的 myFunctionPointer 函数
window.parent.myFunctionPointer();

方法三：使用 postMessage

使用 postMessage API 可以在不同窗口之间进行通信，包括 iframe 和父窗口之间的通信。通过 postMessage API，子窗口可以向父窗口发送消息，并指定一个回调函数来接收父窗口返回的数据或执行父窗口的函数。

// 在子窗口中发送消息到父窗口
// 第一个参数为消息内容，第二个参数为父窗口的域名（必须指定，可以使用通配符）
window.parent.postMessage('hello', 'https://example.com');

// 在父窗口中监听子窗口发送的消息
window.addEventListener('message', function(event) {
  // 判断消息源是否为指定的域名
  if (event.origin === 'https://example.com') {
    // 子窗口传递的消息内容
    var data = event.data;
    // 在父窗口中执行一个函数
    event.source.myFunction();
  }
});

注意事项

在跨域的情况下，需要注意以下几点：

1. 父窗口和子窗口的域名必须相同，或者父窗口的域名在子窗口允许的域名列表中。
2. 父窗口在接收子窗口传递的数据时，需要判断消息源是否为子窗口允许的域名，以避免安全问题。
3. 如果父窗口和子窗口的协议（http 或 https）不同，则需要开启跨域通信。

总结

在 iframe 中调用父窗口函数可以通过 window.parent、函数指针以及 postMessage 三种方法。不同的方法可以根据不同框架和场景选择。在跨域通信时需要注意安全问题和协议差异。