vue中嵌套的iframe中控制路由的跳转及传参


在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数

//iframe向vue传递跳转路由的参数
    $('#serverIPanalysis').click(function(){
        window.parent.postMessage({ data:"haveparams",params:'aaaaaa' },'*');
    })

在vue项目的main.js中,在页面加载的时候会触发一次message事件,所以要通过标识符判断来进行参数的接受,不然直接触发就会报错,在事件对象中有事件的信息,其中就包括iframe中的页面传递过来的参数,通过对象结构取出参数,在进行跳转的设置

//iframe中控制路由的变化
function receiveMessageFromIframePage (event) {
  // console.log(event.data,event)
  if (event.data.data.includes('haveparams')) { var id = event.data.params router.push({name: 'customerlist1',params:{id}}) } else if (event.data.data.includes('noparams')) { router.push({name: 'customerlist1'}) } } window.addEventListener("message", receiveMessageFromIframePage, false);

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM