vue中嵌套的iframe中控制路由的跳转及传参 (从iframe的嵌入的页面中跳转(穿透)到vue router 路由中)
在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数//iframe向vue传递跳转路由的参数$('#serverIPanalysis').click(function(){window.parent.postMessage({ data: 'haveparams', param...
·
在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数
<div>
<div>
<a id="serverIPanalysis">iframe/测试连接1</a>
</div>
<div>
<a id="test-two">iframe/测试连接2</a>
</div>
<div>
<a id="test-three">iframe/测试连接3</a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
//iframe向vue传递跳转路由的参数
$('#serverIPanalysis').click(function(){
console.log('小郭----')
window.parent.postMessage({ data: 'haveparams', params: 'aaaaaa' }, '*')
})
$('#test-two').click(function(){
console.log('小郭----')
window.parent.postMessage({ data: 'test2', params: 'test2' }, '*')
})
$('#test-three').click(function(){
console.log('小郭----')
window.parent.postMessage({ data: 'test3', params: 'test3' }, '*')
})
</script>
在 .vue文件中引入上面写的html或者jsp页面的链接地址
<template>
<iframe src="http://192.168.0.72:8081" frameborder="0" width="100%" height="600px" />
</template>
在vue项目的main.js中,在页面加载的时候会触发一次message事件,所以要通过标识符判断来进行参数的接受,不然直接触发就会报错,在事件对象中有事件的信息,其中就包括iframe中的页面传递过来的参数,通过对象结构取出参数,在进行跳转的设置
// iframe中控制路由的变化
function receiveMessageFromIframePage(event) {
// console.log(event.data,event)
if (event.data.data.includes('haveparams')) {
const id = event.data.params
router.push({ name: 'dashboard', params: { id }})
// router.push({ path: 'dashboard', query: { id }})
} else if (event.data.data.includes('noparams')) {
router.push({ name: 'dashboard' })
}
if (event.data.data.includes('test2')) {
const id = event.data.params
// router.push({ name: 'dashboard', params: { id }})
router.push({ path: '/collect/collect', query: { id }})
} else if (event.data.data.includes('noparams')) {
router.push({ name: 'dashboard' })
}
if (event.data.data.includes('test3')) {
const id = event.data.params
// router.push({ name: 'dashboard', params: { id }})
router.push({ path: '/complex/contract/collect', query: { id }})
} else if (event.data.data.includes('noparams')) {
router.push({ name: 'dashboard' })
}
}
window.addEventListener('message', receiveMessageFromIframePage, false)
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)