通过iframe嵌套页面传参
时间: 2025-05-22 08:45:28 浏览: 17
### 使用 iframe 嵌入网页并传递参数
在 Vue 项目中,可以通过 URL 参数的方式向 `iframe` 中嵌入的页面传递数据。这通常是在设置 `iframe` 的 `src` 属性时完成的。
#### 设置 src 属性携带查询字符串
当创建 `<iframe>` 元素时,在其 `src` 属性后面附加查询字符串来发送简单的键值对给目标页面[^1]:
```html
<template>
<div id="app">
<!-- 将参数作为查询字符串的一部分 -->
<iframe :src="'https://example.com/page?' + new URLSearchParams(params)" width="600" height="450"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
params: { key1: 'value1', key2: 'value2' } // 要传递的数据对象
}
},
}
</script>
```
上述代码片段展示了如何构建带有查询参数的URL,并将其赋值给 `iframe` 的 `src` 属性。这里使用了 JavaScript 内置的对象 `URLSearchParams` 来方便地处理查询串格式化。
#### 在子页面接收父页面传来的参数
对于被加载到 `iframe` 中的目标页面来说,可以利用浏览器 API 获取这些参数。如果该页面也是基于 Vue 或其他前端框架开发,则可以直接解析 window.location.search 并提取所需的信息:
```javascript
// 子页面 (即 iframe 内部) 可能会这样读取来自父级页面的参数
const urlParams = new URLSearchParams(window.location.search);
let value1 = urlParams.get('key1'); // 获取名为 "key1" 的参数对应的值
console.log(value1); // 输出 "value1"
```
这种机制允许父子文档之间安全有效地交换少量信息而无需复杂的跨域通信逻辑。
阅读全文
相关推荐












