Vue中如何使用iframe并结合postMessage实现跨域数据交互？

本文共计1342个文字，预计阅读时间需要6分钟。

目录+使用场景+需求+iframe使用+基本使用+常用属性+iframe高度自适应+获取iframe的内容+同域下获取父/子级内容+iframe跨域+postMessage通信+在vue中使用+使用场景+需求+在H5项目的页面中使用iframe

目录

• 使用场景
• 需求
• iframe使用
• 基本使用
• 常用属性
• iframe高度自适应
• 获取iframe的内容
• 同域下获取父级/子级内容
• iframe跨域
• postMessage通信
• 在vue中使用

使用场景

需求

在一个H5项目的页面中以url的方式嵌入另一个项目的页面。（不得不使用iframe）

而为了兼容移动端api（封装的一个移动端api，iframe内嵌页面不生效），需要实现父子页面的通信 （使用postMessage）。