iframe 用法(iframe标签用法详解)

最近做了一个这样的业务处理，在uniapp 项目中使用第三方页面，需要在当前的页面中把一些数据传给第三方，第三方处理后返回一些数据给当前页面，后续其他的操作会用到当前的数据。

当前页面-发送数据(iframe页面）

iframe 包括第三方地址把需要传递的数据拼接到url 地址

<iframe :src="`http://127.0.0.1/demo?${params}`" ref="iframe"></iframe>

处理参数，把参数字符串作为 URI 组件进行编码

const query = { param1:'xx',  param2:'ddd' }
const params = encodeURIComponent(JSON.stringify(query))

注册监听事件

mounted() {
   window.addEventListener('message', this.handleGetMessage)
},
methods: {
  handleMessage(event)  {
    if(event.data.status ==='ok') {
      console.log(event.data.params, '当前事件数据')
    }
  }
}

第三方地址(iframe子页面）

根据url 获得拼接的参数

const params = JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))

发送数据

 window.parent.postMessage({
          status: 'ok',
          params: { id:111 }
}, '*');

完整代码结构

iframe 父页面发送数据和接受数据

子页面接受数据和发送数据

这样就基本完成了iframe 父子页面之间的数据交互，上面只是个简单的示例，遇到了就写的记录下，具体业务开发的时候还是需要处理下，比如传递参数的时候可以把参数加密下，如果传递的参数比较敏感直接编码发送不好，常用的aes或者base64等，或者可以多层加密。

插个题外话阿：有没有需要前端开发兼职的啊，最好vue方向的，只要东西全上手就是干！

点击显示全文

本文链接：https://www.zhantian9.com/232724.html

iframe 用法(iframe标签用法详解)

当前页面-发送数据(iframe页面）

第三方地址(iframe子页面）

完整代码结构

相关推荐

圆脸做什么发型好看（10款适合大圆脸的发型）

观音土是什么东西（观音土能吃吗）

电表型号规格有什么含义，电表有几种接法！

支付宝利息多少(四大平台利率对比)

茶楼名字(茶楼名字大全大气好听)

安徽鸡蛋有哪些(安徽鸡蛋价格)

发表回复