综艺
iframe 用法(VUE 项目中使用iframe及传值)

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

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

注册监听事件

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

第三方地址(iframe子页面)

发送数据

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

完整代码结构


VUE 项目中使用if<em></em>rame及传值nerror="javascript:errorimg.call(this);">

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

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


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


顶一下()     踩一下()

热门推荐

发表评论
0评