2024年6月5日发(作者：)

iframe父向子传参数

在HTML中，如果你想从一个`iframe`的父窗口向`iframe`内部传递参数，

通常可以通过以下几种方式实现：

1. 使用`postMessage` API:

这是最推荐的方式，因为它提供了跨域通信的能力，并确保了数据的安全性。

父窗口可以使用``方法向`iframe`发送消息，而`iframe`内的脚本可以使用``

来监听这些消息。

父窗口:

```javascript

const iframe = ('myIframe');

({param1: 'value1'}, '');

```

iframe内部:

```javascript

('message', function(event) {

if ( !== " return; // 确保安全性

(); // 输出 {param1: 'value1'}

}, false);

```

2. 使用URL参数:

如果参数是简单的，并且你不关心跨域问题，你可以直接在`iframe`的URL

后面附加参数。例如：

```html

```

然后在`iframe`内的页面中通过``来获取这些参数。

3. 使用隐藏的表单:

你可以在父窗口中创建一个隐藏的表单，设置其目标为`iframe`，然后提交

表单。这主要用于向`iframe`传递POST数据。

4. 使用Cookies:

虽然这种方法不是直接从父窗口到`iframe`，但你可以在父窗口设置cookie，

然后在`iframe`内部读取它。这主要用于跨域通信和持久化存储数据。

选择哪种方法取决于你的具体需求和限制。如果你只是需要简单、非跨域的

通信，第二种方法可能更简单。但如果你需要更复杂的通信或跨域通信，则

推荐使用`postMessage`方法。