yintech 内部跨域组件
npm install yintech-crm -S
//main.js
import Vue from 'vue'
import yintechCrm from 'yintech-crm'
Vue.use(yintechCrm)
【发送消息】参数说明
参数 | 描述 |
---|---|
moduleName | 对应模块名称,唯一性,on和emit必须对应,必须 |
message | 要发送的数据,必须 |
ifmId | 当前iframe的ID名称,必须 |
isParent | true =》top window 发送给 子window ; false =》 子window 发送给 top window(即父级页面) |
【接收消息】参数说明
参数 | 描述 |
---|---|
moduleName | 对应模块名称,唯一性,on和emit必须对应,必须 |
callback | 回调函数,参数msg为接收到的数据,function(msg){ console.log(msg); } |
<!-- app.vue -->
<template>
<iframe src="http://localhost:8005/iframeTest.html" width="100%" height="600" id="ifr1"></iframe>
<button @click="doClick">写入iframe</button>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
doClick() {
//*********发送消息*********
//top window父级发送消息 emit(发送的消息json,iframeId,true父级发送)
this.$crmMessage.emit({
moduleName:"checkLogin",
message:{name:'hello,小子~'},
ifmId:'ifr1',
isParent:true
});
//iframe页面发送消息调用方法
this.$crmMessage.emit({
moduleName:"checkLogin",
message:{name:'hello,小子~'}
});
//*********接收消息*********
this.$crmMessage.on({
moduleName:"checkLogin", //和emit保持一致
callback:function(msg){
console.log(msg);
}
});
}
}
}
</script>
####### 有问题,请联系
喜欢就加个star吧, thanks very much!