@jslq/vue-iframe-messager
v1.0.4
Published
[vue]iframe跨域通信插件
Downloads
22
Maintainers
Readme
Vue-iframe-messager
基于vue(vuex)实现的可跨域iframe通信的插件,有问题联系QQ: 917498254,或者提issue
🚀 下载
npm install @jslq/vue-iframe-messager --save
在iframe中使用
import Vue from 'vue'
import store from './store'
import VueIframeMessager from '@jslq/vue-iframe-messager'
Vue.use(new VueIframeMessager({
role: 'iframe',
vuex: {
store,
actionPrefix: "MESSAGER_", //默认值就是这个
mutationPrefix: "MESSAGER_" //没有默认值,需手动传入
},
options: {
window: window,
origin: process.env.VUE_APP_PARENT_ORIGIN //在vue-cli3中可以存父窗口的origin,同域可以不传
}
}))
在父窗口中使用
import Vue from 'vue'
import store from './store'
import VueIframeMessager from '@jslq/vue-iframe-messager'
Vue.use(new VueIframeMessager({
role: 'parent',
vuex: {
store,
actionPrefix: "MESSAGER_", //默认值就是这个
mutationPrefix: "MESSAGER_" //没有默认值,需手动传入
},
options: {
iframeId: 'my-iframe'
window: window,
origin: process.env.VUE_APP_IFRAME_ORIGIN //在vue-cli3中可以存父窗口的origin,同域可以不传
}
}))
如何在组件中注册事件
//a.vue in parent
export default {
...
data() {
return {
got
}
},
messager: { //如果alias 赋值则使用那个值,parent和iframe的alias保持一直
//会自动注册type===selected的事件
selected(data) {
this.got = data //'haha'
}
}
...
}
//b.vue in iframe
export default {
...
method: {
handlerClick() {
this.$messager.send('selected', 'haha')
}
}
...
}
参数|类型|默认值|是否必传|描述
-----|-----|-----|-----|-----
role|string|null
|是|看上面
alias|string|messager
|不是|如果用到vue插件也是以messager作为名字,为了防止冲突,可以起别名,不过一般不会有人用这个名字
vuex.store|Vuex|null
|不是|Vuex store 实例
vuex.actionPrefix|String|null
|不是|前缀
vuex.mutationPrefix|String |null
|不是|前缀
options.iframeId|string|null
|是|role是'parent'时必传
options.origin|string|null
|是|role是'iframe'并且和父窗口跨域时必传
options.window|DOMElement|null
|是|window对象
在vuex中使用
import Vue from 'vue'
import Vuex from 'vuex'
const prefix = 'MESSAGER_'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {
`MESSAGER_${EVENT_NAME}`() {
// do something
}
},
actions: {
`MESSAGER_${EVENT_NAME}`() {
// do something
}
}
})
常见问题
父窗口mounted中调用this.$messager.send没有生效
虽然设置了origin,但是还是会有跨域问题,原因未知,不过可以用setTimeout延迟执行
提示跨域
报错信息 Failed to execute 'postMessage' on 'DOMWindow',设置下options.origin 即可