JavaScript 如何将事件从父窗口传递给 iframe ？

在JavaScript中，要将事件从父窗口传递给嵌入的iframe，需要遵循一定的步骤和安全措施，以确保代码的正常执行和数据的安全。以下是一个系统性的方法来实现这一功能：

步骤一：确保同源政策

首先，需要确保父窗口和iframe都遵守同源政策（即协议、域名和端口号都相同）。如果不是同源，浏览器的安全策略会阻止跨域通信，除非使用特定技术如postMessage方法。

步骤二：使用postMessage方法

postMessage 是HTML5中引入的方法，允许来自不同源的窗口进行安全的通信。该方法可以发送消息到另一个窗口，无论窗口是否属于同一个源。

假设父窗口需要向iframe发送数据或通知事件，可以使用如下代码：

javascript
// 父窗口中
var iframe = document.getElementById('myIframe');
var message = "Hello from parent!";  // 想要发送的消息
iframe.contentWindow.postMessage(message, 'http://example.com');

这里，'http://example.com' 是iframe的域名，为确保安全，应精确指定接收消息的窗口的来源。

步骤三：在Iframe中接收消息

在iframe中，需要设置一个事件监听器来接收并处理从父窗口发来的消息：

javascript
// iframe中
window.addEventListener('message', function(event) {
    if (event.origin !== "http://example.com") {
        // 如果来源不匹配，不处理消息
        return;
    }

    console.log('Message received in iframe: ', event.data);
    // 根据event.data进行相关处理
});

这样，当父窗口使用postMessage发送消息时，iframe可以通过监听'message'事件来接收并处理这些消息。

示例

假设我们有一个父页面，里面嵌入了一个来自同源的iframe，并且我们需要在用户点击父页面的按钮时，通知iframe：

父页面HTML:

html
<button id="notifyButton">Notify Iframe</button>
<iframe id="myIframe" src="http://example.com/iframe.html"></iframe>

父页面JavaScript:

javascript
document.getElementById('notifyButton').addEventListener('click', function() {
    var iframe = document.getElementById('myIframe');
    iframe.contentWindow.postMessage("User clicked button", "http://example.com");
});

Iframe页面JavaScript:

javascript
window.addEventListener('message', function(event) {
    if (event.origin === "http://example.com") {
        alert("Received notification: " + event.data);
    }
});

通过这个例子，当用户点击按钮时，iframe会接收到一个警告显示消息内容。这是一个有效的方式来在不同的框架之间进行安全的数据传递和事件通知。