iframe传递参数(两个iframe之间传值方法)
两个iframe之间怎么传值?iframe传递参数,Vue项目中使用iframe及传值,最近做了一个这样的业务处理,在uniapp 项目中使用第三方页面,需要在当前的页面中把一些数据传给第三方,第三方处理后返回一些数据给当前页面,后续其他的操作会用到当前的数据。
一、两个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等,或者可以多层加密。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/web/qdkf/389.html
原文地址:https://tangjiusheng.cn/web/qdkf/389.html