【给iframe传参数】在网页开发中，`<iframe>` 是一种常用的嵌入外部页面的标签。有时我们需要在加载 `iframe` 时，向其传递一些参数，以便动态地控制或显示内容。本文将总结几种常见的“给 iframe 传参数”的方法，并以表格形式进行对比。
一、常见传参方式总结
| 方法 | 说明 | 是否支持动态传参 | 适用场景 | 优点 | 缺点 |
| URL 参数（Query String） | 在 `src` 属性后添加 `?key=value` 形式 | ✅ | 需要动态加载内容的页面 | 简单易用 | 无法传递复杂数据 |
| JavaScript 动态修改 src | 使用 JS 修改 `iframe.src` | ✅ | 需要运行时动态传参 | 灵活 | 需要 JS 支持 |
| postMessage API | 通过浏览器跨域通信机制 | ✅ | 跨域传参 | 安全性高 | 需要双方配合 |
| 嵌入 HTML 内容（非跨域） | 直接在 iframe 中写入 HTML 内容 | ✅ | 同源页面 | 可直接操作 DOM | 不适用于跨域 |
二、详细说明
1. URL 参数（Query String）
这是最简单的方式，适用于同源或可接受 URL 参数的页面。例如：
```html
<iframe src="https://example.com/page.html?user=123"></iframe>
```
在目标页面中，可以通过 `window.location.search` 或 `URLSearchParams` 获取参数。
2. JavaScript 动态修改 src
如果需要在页面加载后动态传参，可以使用 JavaScript 来修改 `iframe` 的 `src` 属性：
```javascript
document.getElementById("myIframe").src = "https://example.com/page.html?user=456";
```
这种方式适合在用户交互后更新内容。
3. postMessage API
对于跨域的情况，推荐使用 `postMessage` 方法进行安全通信。父窗口和子窗口都可以调用该 API 发送消息：
父窗口发送消息：
```javascript
var iframe = document.getElementById("myIframe");
iframe.contentWindow.postMessage("Hello from parent", "");
```
子窗口接收消息：
```javascript
window.addEventListener("message", function(event) {
if (event.origin !== "https://parent-domain.com") return;
console.log(event.data); // 接收消息
});
```
这种方式更安全，适合处理敏感信息。
4. 嵌入 HTML 内容（非跨域）
如果 `iframe` 加载的是同一域名下的页面，可以直接在父页面中动态生成 HTML 内容并插入到 `iframe` 中：
```html
<iframe id="myIframe" srcdoc="
```
这种方式不需要额外的请求，但不适用于跨域环境。
三、总结
在实际开发中，选择哪种传参方式取决于具体需求，如是否跨域、是否需要动态更新、是否涉及安全性等。对于大多数情况，使用 URL 参数或 JavaScript 动态修改 `src` 是最常见且简单的方式；而对于跨域场景，推荐使用 `postMessage` 进行安全通信。
合理选择传参方式，可以提升用户体验和系统稳定性。