iframe传递参数(两个iframe之间传值方法)

 分类:前端开发时间:2022-06-14点击: 2022前端视频教程(自学必看)

两个iframe之间怎么传值?iframe传递参数,Vue项目中使用iframe及传值,最近做了一个这样的业务处理,在uniapp 项目中使用第三方页面,需要在当前的页面中把一些数据传给第三方,第三方处理后返回一些数据给当前页面,后续其他的操作会用到当前的数据。

iframe传递参数

一、两个iframe之间传值方法

1、当前页面-发送数据(iframe页面)

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

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

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

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

3、注册监听事件

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

4、第三方地址(iframe子页面)根据url 获得拼接的参数

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

5、发送数据

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

二、iframe传递参数实例,完整代码:

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

<template>
  <view>
    <iframe :src="`http://1.1.1.1/demo?$[params]`"></iframe>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        params: ''
      };
    },
    mounted() {
      const params = {
        name1: 'xxx',
        name2: 'xxx'
      }
      this.params = encodeURIComponent(JSON.stringify(params))
      window.addEventListener('message', this.handleMessage)
    },
    methods: {
      handleMessage(event) {
        console.log(event, '事件') 
        if(event.data.status === 'ok') {
          console.log(event.data.params, '参数值')
        }
      }
    }
  }
</script>
<style>
  
</style>

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

<template>
  <view>
    <p>获得的参数:{{params}}</p>
    <button @click="sendMess">发送数据</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        params: ''
      };
    },
    created() {
      const params = JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))
      this.params = params
    },
    methods: {
      sendMess() {
        window.parent.postMessage({
          status: 'ok',
          params: {
            id: 111
          }
        }, '*');
      }
    }
  }
</script>

<style>

</style>

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

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: